# 테이블 요소 ![](/files/-MRKfcwhTla-nshlzi97) ![](/files/-MRKfh-jHBak02ccJkqs) {% hint style="warning" %} cellspacing 속성은 이제 table에서 사용하지 않는다. 대신 [border-spacing](https://developer.mozilla.org/ko/docs/Web/CSS/border-spacing) 속성을 사용한다. 이 속성은 가로와 세로 값을 각각 지정할 수 있다는 장점이 있다. {% endhint %} ## 테이블 요소 ### \ * 테이블 **몸체**에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다. * 복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다. * 가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이다. * 테이블 내 테이블을 중첩해서는 안된다. * 테이블을 레이아웃(배치) 목적으로 사용해서는 안된다. * border 속성을 사용해 테두리를 그릴 수 있다. (CSS로 대체하는 것이 좋다) ### \
* 테이블의 **제목**을 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다. * 테이블 내용이 복잡해 설명이 필요하다면 아래 나열된 방법 중 하나를 선택해 기술해야 한다. ### 테이블의 접근성 고려하여 설명 추가하기 (aria-describedby) 1. `aria-describedby` 속성을 사용해 설명 단락(paragraph)을 연결 한다. 2. `` 요소에 `aria-describedby` 속성을 사용해 제목(caption)을 연결 한다. ```markup

국제(한국, 영궁, 유럽) 성인 남성 운동화 사이즈 비교 표로 4행 12열로 구성되어 있습니다.

``` ![](/files/-MRO9IJ3xLNcp610oIdi) {% 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` 속성은 보조 기술 사용자를위한 테이블과 정보를 명시 적으로 연관시키는 데 사용된다. {% endhint %} ### \ * 테이블의 **행(row)**을 말하며 내부에 셀 제목(header), 셀 내용(data)을 포함한다. ### \ ``` {% hint style="info" %} **scope의** row/ col은 제목이 하나의 행/ 열 제목임을 나타낼 때 사용한다. rowgroup/ colgroup은 제목이 여러 행/ 열의 제목임을 나타낼 때 사용한다. {% endhint %} ![실습(2) 복잡한 표 ](/files/-MROh2VwAQcLm8_ix4kW) ### \, \, \](/files/-MROFjsknux4zKLzzJwH) ### \ 테이블 행 블록(row block) 내에 **제목 열 그룹(column headers)으로 구성할 경우** 사용한다. 선택적(option)으로 사용한다. (필수 아님) ### \ 행 블록 내에 **테이블 데이터로 구성할 때** 사용한다. 선택적(option)으로 사용한다. (필수 아님) ### \ 행 블록 내에 열 요약(column summaries)로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님) ### \* 기본적으로 table 요소가 row 방향으로 표가 만들어지기 때문에 column 방향으로 만들 때 사용한다. * 테이블 **열(column)을 하나 이상 묶고자 할 때** 사용한다. 일반적으로 `` 요소 내부에 포함시킨다. 선택적(option)으로 사용한다. (필수 아님) #### 속성 * span: 열 묶음 개수 설정 ### \테이블 열(column) 그룹을 만들고자 할 때 사용한다. **내부에 col 요소를 포함하거나, 포함하지 않을 수 있다.** 선택적(option)으로 사용한다. (필수 아님) #### 속성 * span: colgroup 요소가 col을 포함하지 않을 경우, 열 묶음 개수 설정 ## 참고 * \
* 테이블 셀 **제목(header cell in a table)**으로 **행(tr) 내부에 포함되어야 한다.** #### 속성 * **scope**: 행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 **제목임을 명시** * abbr: 제목이 길어 축약(Abbreviation)이 필요할 때 사용 * colspan: 열(column)을 그룹 지을 때(병합) 사용 * rowspan: 행(row)을 그룹 지을 때(병합) 사용 ```markup 한국(mm) * 테이블 셀 **내용(data cell in a table)**으로 **행(tr) 내부에 포함되어야 한다.** #### 속성 * colspan: 열(column)을 그룹 지을 때 사용 * rowspan: 행(row)을 그룹 지을 때 사용 * headers: 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용 #### headers 속성 {% hint style="success" %} 복잡한 테이블 구조일 경우, 내용 셀 headers 속성에 연결된 제목 셀 id를 순서대로 읽어준다고 명시한다. {% endhint %} ![](/files/-MROfBiZfE7Zb2ENRpxj) ![\
[테이블 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/table) → MDN * \[테이블 열 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/col) → MDN * \[테이블 열 그룹 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup) → MDN * \ [테이블 행 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tr) → MDN * \ [테이블 헤더 행 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/thead) → MDN * \ [테이블 바디 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tbody) → MDN * \ [테이블 푸터 행 블록 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/tfoot) → MDN * \
[테이블 제목 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/caption) → MDN * \
[테이블 제목 셀 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/th) → MDN * \ [테이블 내용(데이터) 셀 요소](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="/files/-MROmNQr-RT5J\_3czSTa" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://shhn0509.gitbook.io/html-and-css/html/undefined-16.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.