테이블 요소
cellspacing 속성은 이제 table에서 사용하지 않는다. 대신 border-spacing 속성을 사용한다. 이 속성은 가로와 세로 값을 각각 지정할 수 있다는 장점이 있다.
테이블 요소
<table>
테이블 몸체에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다.
복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다.
가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이다.
테이블 내 테이블을 중첩해서는 안된다.
테이블을 레이아웃(배치) 목적으로 사용해서는 안된다.
border 속성을 사용해 테두리를 그릴 수 있다. (CSS로 대체하는 것이 좋다)
<caption>
테이블의 제목을 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다.
테이블 내용이 복잡해 설명이 필요하다면 아래 나열된 방법 중 하나를 선택해 기술해야 한다.
테이블의 접근성 고려하여 설명 추가하기 (aria-describedby)
aria-describedby속성을 사용해 설명 단락(paragraph)을 연결 한다.<table>요소에aria-describedby속성을 사용해 제목(caption)을 연결 한다.
<p id="compare-shoes-table">국제(한국, 영궁, 유럽) 성인 남성 운동화 사이즈 비교 표로
4행 12열로 구성되어 있습니다.</p>
<table aria-describedby="compare-shoes-table">
<tr>
테이블의 행(row)을 말하며 내부에 셀 제목(header), 셀 내용(data)을 포함한다.
<th>
테이블 셀 제목(header cell in a table)으로 행(tr) 내부에 포함되어야 한다.
속성
scope: 행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 제목임을 명시
abbr: 제목이 길어 축약(Abbreviation)이 필요할 때 사용
colspan: 열(column)을 그룹 지을 때(병합) 사용
rowspan: 행(row)을 그룹 지을 때(병합) 사용
<th scope="row">한국(mm)</th>
<td>
테이블 셀 내용(data cell in a table)으로 행(tr) 내부에 포함되어야 한다.
속성
colspan: 열(column)을 그룹 지을 때 사용
rowspan: 행(row)을 그룹 지을 때 사용
headers: 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용
headers 속성
복잡한 테이블 구조일 경우, 내용 셀 headers 속성에 연결된 제목 셀 id를 순서대로 읽어준다고 명시한다.
<thead>
테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용한다. 선택적(option)으로 사용한다. (필수 아님)
<tbody>
행 블록 내에 테이블 데이터로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님)
<tfoot>
행 블록 내에 열 요약(column summaries)로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님)
<col>
기본적으로 table 요소가 row 방향으로 표가 만들어지기 때문에 column 방향으로 만들 때 사용한다.
테이블 열(column)을 하나 이상 묶고자 할 때 사용한다. 일반적으로
<colgroup>요소 내부에 포함시킨다. 선택적(option)으로 사용한다. (필수 아님)
속성
span: 열 묶음 개수 설정
<colgroup>
테이블 열(column) 그룹을 만들고자 할 때 사용한다. 내부에 col 요소를 포함하거나, 포함하지 않을 수 있다. 선택적(option)으로 사용한다. (필수 아님)
속성
span: colgroup 요소가 col을 포함하지 않을 경우, 열 묶음 개수 설정
참고
<table> 테이블 요소 → MDN
<caption> 테이블 제목 요소 → MDN
<col> 테이블 열 요소 → MDN
<colgroup> 테이블 열 그룹 요소 → MDN
<tr> 테이블 행 요소 → MDN
<thead> 테이블 헤더 행 블록 요소 → MDN
<tbody> 테이블 바디 블록 요소 → MDN
<tfoot> 테이블 푸터 행 블록 요소 → MDN
<th> 테이블 제목 셀 요소 → MDN
<td> 테이블 내용(데이터) 셀 요소 → MDN
Tabular Data → HTML 5.2 표준 기술 사양
Last updated
Was this helpful?