테이블 요소
Last updated
Last updated
cellspacing 속성은 이제 table에서 사용하지 않는다. 대신 border-spacing 속성을 사용한다. 이 속성은 가로와 세로 값을 각각 지정할 수 있다는 장점이 있다.
테이블 몸체에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다.
복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다.
가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이다.
테이블 내 테이블을 중첩해서는 안된다.
테이블을 레이아웃(배치) 목적으로 사용해서는 안된다.
border 속성을 사용해 테두리를 그릴 수 있다. (CSS로 대체하는 것이 좋다)
테이블의 제목을 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다.
테이블 내용이 복잡해 설명이 필요하다면 아래 나열된 방법 중 하나를 선택해 기술해야 한다.
aria-describedby 속성을 사용해 설명 단락(paragraph)을 연결 한다.
<table> 요소에 aria-describedby 속성을 사용해 제목(caption)을 연결 한다.
W3C 4.9.1.1. Techniques for describing tables 참고
aria-describedby 속성은 보조 기술 사용자를위한 테이블과 정보를 명시 적으로 연관시키는 데 사용된다.
테이블의 행(row)을 말하며 내부에 셀 제목(header), 셀 내용(data)을 포함한다.
테이블 셀 제목(header cell in a table)으로 행(tr) 내부에 포함되어야 한다.
scope: 행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 제목임을 명시
abbr: 제목이 길어 축약(Abbreviation)이 필요할 때 사용
colspan: 열(column)을 그룹 지을 때(병합) 사용
rowspan: 행(row)을 그룹 지을 때(병합) 사용
scope의 row/ col은 제목이 하나의 행/ 열 제목임을 나타낼 때 사용한다.
rowgroup/ colgroup은 제목이 여러 행/ 열의 제목임을 나타낼 때 사용한다.
테이블 셀 내용(data cell in a table)으로 행(tr) 내부에 포함되어야 한다.
colspan: 열(column)을 그룹 지을 때 사용
rowspan: 행(row)을 그룹 지을 때 사용
headers: 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용
복잡한 테이블 구조일 경우, 내용 셀 headers 속성에 연결된 제목 셀 id를 순서대로 읽어준다고 명시한다.
테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용한다. 선택적(option)으로 사용한다. (필수 아님)
행 블록 내에 테이블 데이터로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님)
행 블록 내에 열 요약(column summaries)로 구성할 때 사용한다. 선택적(option)으로 사용한다. (필수 아님)
기본적으로 table 요소가 row 방향으로 표가 만들어지기 때문에 column 방향으로 만들 때 사용한다.
테이블 열(column)을 하나 이상 묶고자 할 때 사용한다. 일반적으로 <colgroup> 요소 내부에 포함시킨다. 선택적(option)으로 사용한다. (필수 아님)
span: 열 묶음 개수 설정
테이블 열(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 표준 기술 사양
