# 테이블 요소

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRKdfsCYQnCf_bteeAy%2F-MRKfcwhTla-nshlzi97%2Fimage.png?alt=media\&token=efa46050-7329-4953-9577-d0583c8be9da)

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRKdfsCYQnCf_bteeAy%2F-MRKfh-jHBak02ccJkqs%2Fimage.png?alt=media\&token=bf7ab7e7-37c9-4c8a-9a01-b7ba086cc955)

{% hint style="warning" %}
cellspacing 속성은 이제 table에서 사용하지 않는다. 대신 [border-spacing](https://developer.mozilla.org/ko/docs/Web/CSS/border-spacing) 속성을 사용한다. 이 속성은 가로와 세로 값을 각각 지정할 수 있다는 장점이 있다.&#x20;
{% endhint %}

## 테이블 요소

### \<table>

* 테이블 **몸체**에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다.
* 복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다. &#x20;
* 가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이다. &#x20;
* 테이블 내 테이블을 중첩해서는 안된다. &#x20;
* 테이블을 레이아웃(배치) 목적으로 사용해서는 안된다. &#x20;
* border 속성을 사용해 테두리를 그릴 수 있다. (CSS로 대체하는 것이 좋다)

### \<caption>&#x20;

* 테이블의 **제목**을 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다. &#x20;
* 테이블 내용이 복잡해 설명이 필요하다면 아래 나열된 방법 중 하나를 선택해 기술해야 한다.

### 테이블의 접근성 고려하여 설명 추가하기 (aria-describedby)

1. `aria-describedby` 속성을 사용해 설명 단락(paragraph)을 연결 한다. &#x20;
2. `<table>` 요소에 `aria-describedby` 속성을 사용해 제목(caption)을 연결 한다. &#x20;

```markup
<p id="compare-shoes-table">국제(한국, 영궁, 유럽) 성인 남성 운동화 사이즈 비교 표로 
4행 12열로 구성되어 있습니다.</p>
<table aria-describedby="compare-shoes-table">
```

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRO9B42Lv7FGcPau2uo%2F-MRO9IJ3xLNcp610oIdi%2Fimage.png?alt=media\&token=14125e8f-f920-4b9a-832a-74ee46e6e91a)

{% hint style="info" %}
[W3C 4.9.1.1. Techniques for describing tables](https://www.w3.org/TR/html52/tabular-data.html#sec-techniques-for-describing-tables) 참고\
`aria-describedby` 속성은 보조 기술 사용자를위한 테이블과 정보를 명시 적으로 연관시키는 데 사용된다.&#x20;
{% endhint %}

### \<tr>

* 테이블의 **행(row)**&#xC744; 말하며 내부에 셀 제목(header), 셀 내용(data)을 포함한다.

### \<th>&#x20;

* 테이블 셀 **제목(header cell in a table)**&#xC73C;로 **행(tr) 내부에 포함되어야 한다.**

#### 속성

* **scope**: 행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 **제목임을 명시**
* abbr: 제목이 길어 축약(Abbreviation)이 필요할 때 사용
* colspan: 열(column)을 그룹 지을 때(병합) 사용
* rowspan: 행(row)을 그룹 지을 때(병합) 사용

```markup
<th scope="row">한국(mm)</th>
```

{% hint style="info" %}
**scope의** row/ col은 제목이 하나의 행/ 열 제목임을 나타낼 때 사용한다.&#x20;

rowgroup/ colgroup은 제목이 여러 행/ 열의 제목임을 나타낼 때 사용한다.&#x20;
{% endhint %}

![실습(2) 복잡한 표 ](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MROFqzZohfGx1avvbce%2F-MROh2VwAQcLm8_ix4kW%2Fimage.png?alt=media\&token=b8719593-73c2-4aa0-84ef-f5c509ea156d)

### \<td>

* 테이블 셀 **내용(data cell in a table)**&#xC73C;로 **행(tr) 내부에 포함되어야 한다.** &#x20;

#### 속성&#x20;

* colspan: 열(column)을 그룹 지을 때 사용 &#x20;
* rowspan: 행(row)을 그룹 지을 때 사용 &#x20;
* headers: 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용

#### headers 속성&#x20;

{% hint style="success" %}
복잡한 테이블 구조일 경우, 내용 셀 headers 속성에 연결된 제목 셀 id를 순서대로 읽어준다고 명시한다.&#x20;
{% endhint %}

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MROFqzZohfGx1avvbce%2F-MROfBiZfE7Zb2ENRpxj%2Fimage.png?alt=media\&token=1de36cc7-5c52-4bf4-8a28-7dcaf9439bcf)

![\<tbody>, \<thead>, \<tfoot>](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRODQP9yoMFaCFxAaaV%2F-MROFjsknux4zKLzzJwH%2Fimage.png?alt=media\&token=19cb4b85-557a-4551-bf03-5be395c06310)

### \<thead>

테이블 행 블록(row block) 내에 **제목 열 그룹(column headers)으로 구성할 경우** 사용한다. 선택적(option)으로 사용한다. (필수 아님)

### \<tbody>

행 블록 내에 **테이블 데이터로 구성할 때** 사용한다. 선택적(option)으로 사용한다. (필수 아님)

### \<tfoot>&#x20;

행 블록 내에 열 요약(column summaries)로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님)

### \<col>

* 기본적으로 table 요소가 row 방향으로 표가 만들어지기 때문에 column 방향으로 만들 때 사용한다.&#x20;
* 테이블 **열(column)을 하나 이상 묶고자 할 때** 사용한다. 일반적으로 `<colgroup>` 요소 내부에 포함시킨다. 선택적(option)으로 사용한다. (필수 아님)

#### 속성

* span: 열 묶음 개수 설정

### \<colgroup>&#x20;

테이블 열(column) 그룹을 만들고자 할 때 사용한다. **내부에 col 요소를 포함하거나, 포함하지 않을 수 있다.** 선택적(option)으로 사용한다. (필수 아님)

#### 속성

* span: colgroup 요소가 col을 포함하지 않을 경우, 열 묶음 개수 설정

## 참고&#x20;

* \<table> [테이블 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/table) → MDN
* \<caption> [테이블 제목 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/caption) → MDN
* \<col> [테이블 열 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/col) → MDN
* \<colgroup> [테이블 열 그룹 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup) → MDN
* \<tr> [테이블 행 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tr) → MDN
* \<thead> [테이블 헤더 행 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/thead) → MDN
* \<tbody> [테이블 바디 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tbody) → MDN
* \<tfoot> [테이블 푸터 행 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tfoot) → MDN
* \<th> [테이블 제목 셀 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/th) → MDN
* \<td> [테이블 내용(데이터) 셀 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/td) → MDN
* [Tabular Data](https://www.w3.org/TR/html52/tabular-data.html#tabular-data) → HTML 5.2 표준 기술 사양

{% file src="<https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MROkqX0Nk90ZcMq4NO7%2F-MROmNQr-RT5J_3czSTa%2Ftabular.zip?alt=media&token=3b27d77a-c59e-471a-a474-63117188d5b9>" %}
