HTML <table>: 표 요소
HTML <table> 요소는 표 데이터, 즉 칸의 행과 열로 이루어진 2차원 데이터를 나타냅니다.
불러오는 중...
<table>
<caption>우리 매장 원산지 표기</caption>
<thead>
<tr>
<th>종류</th>
<th>품목</th>
<th>원산지</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">과일</th>
<td>사과</td>
<td rowspan="2">국산</td>
</tr>
<tr>
<td>배</td>
</tr>
<tr>
<td>파인애플</td>
<td>수입산</td>
</tr>
<tr>
<th>곡물</th>
<td>쌀</td>
<td>국산</td>
</tr>
<tr>
<th>해산물</th>
<td>고등어</td>
<td>원양산</td>
</tr>
</tbody>
</table>
th,
td {
border: 1px solid #777;
padding: 8px;
}
th {
background: #efefef;
color: #333;
}
특성
전역 특성만 포함합니다.
예제
기본 사용법
열 그룹이나 여러 행/열에 걸친 칸을 포함하지 않는, 기초적인 구조의 표를 보이는 예제입니다.
HTML
<table>
<thead>
<tr>
<th>이름</th>
<th>실</th>
<th>팀</th>
<th>사번</th>
<th>입사일</th>
</tr>
</thead>
<tbody>
<tr>
<th>간우선</th>
<td>신사업실</td>
<td>제1영업팀</td>
<td>120073</td>
<td><time datetime="2021-01-13">2021년 1월 13일</time></td>
</tr>
<tr>
<th>진소훈</th>
<td>신사업실</td>
<td>제3영업팀</td>
<td>108028</td>
<td><time datetime="2020-06-03">2020년 6월 3일</time></td>
</tr>
<tr>
<th>문규연</th>
<td>인사실</td>
<td>보상팀</td>
<td>110301</td>
<td><time datetime="2020-12-28">2020년 12월 28일</time></td>
</tr>
</tbody>
</table>
CSS
<table> 요소와 그 구성요소에는 테두리가 포함되지 않으므로, 표를 읽기 쉽도록 간단한 검은색 테두리를 추가합니다.
table,
th,
td {
border: 1px solid #000;
}
결과
불러오는 중...
칸 병합
위의 예제에 이어서, 워드프로세서나 스프레드시트의 "칸 병합"과 같은 기능을 보이는 예제입니다.
"간우선"과 "진소훈"의 실 단위 소속이 "신사업실"로 같으므로 두 명의 소속실을 하나의 칸으로만 나타내겠습니다. 그리고 "실"과 "팀" 헤더가 한 눈에 들어오지 않으므로, 두 헤더 위에 "부서"라는 칸을 하나 더 배치해보겠습니다. 이번에는 결과를 먼저 확인하세요.
불러오는 중...
HTML
<thead>에 행을 하나 더 추가했고, "진소훈"의 신사업실 칸을 제거한 것 외에는 구조가 바뀌지는 않습니다.
<table>
<thead>
<tr>
<th rowspan="2">이름</th>
<th colspan="2">부서</th>
<th rowspan="2">사번</th>
<th rowspan="2">입사일</th>
</tr>
<tr>
<th>실</th>
<th>팀</th>
</tr>
</thead>
<tbody>
<tr>
<th>간우선</th>
<td rowspan="2">신사업실</td>
<td>제1영업팀</td>
<td>120073</td>
<td><time datetime="2031-01-13">2031년 1월 13일</time></td>
</tr>
<tr>
<th>진소훈</th>
<td>제3영업팀</td>
<td>108028</td>
<td><time datetime="2030-06-03">2030년 6월 3일</time></td>
</tr>
<tr>
<th>문규연</th>
<td>인사실</td>
<td>보상팀</td>
<td>110301</td>
<td><time datetime="2030-12-28">2030년 12월 28일</time></td>
</tr>
</tbody>
</table>
중요한 변경점은 "이름", "사번", "입사일"과 "신사업실"에 rowspan="2"을 사용한 것입니다. 네 개의 칸이 하나의 행 대신 두 개의 행을 차지하는 모습에 주목하세요. 마찬가지로, colspan="2"를 지정한 "부서" 칸이 두 개의 열에 걸쳐있는 것도 결과에서 볼 수 있습니다.
table,
th,
td {
border: 1px solid #000;
}
병합한 칸을 포함하는 표는 접근성이 떨어질 수 있습니다.
접근성 고려사항
표 설명
표의 용도를 간결하고 명확하게 설명하는 <caption> 요소를 추가하면 표를 읽어봐야 할지 아니면 그냥 넘어가도 괜찮을지를 사용자가 결정할 때 도움이 됩니다.
스크린 리더와 같은 접근성 보조기술 사용자와 저시력 또는 인지력 저하 사용자에게 특히 유용합니다.
헤더 범위 지정
간단한 표에서는 <th> 요소의 scope 특성이 불필요합니다. 일반적으로는 헤더의 범위가 자동으로 유추되기 때문입니다. 그러나 일부 보조기술은 자동 유추를 제대로 수행하지 못할 수 있으므로, 범위를 명시하는 것이 사용자 경험을 개선할 가능성도 있습니다.
복잡한 표에서는 직접 범위를 지정해서 헤더가 어떤 칸에 적용되는지 나타낼 수 있습니다.
예제
<table>
<caption>
색 이름과 색상 코드
</caption>
<tbody>
<tr>
<th scope="col">이름</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</tbody>
</table>
<th> 요소에 scope="col"을 지정하면 헤더가 열의 맨 위에 있다고 나타낼 수 있고, scope="row"를 지정하면 행의 맨 처음에 있다고 나타낼 수 있습니다.
복잡한 표
표가 너무 복잡해서 칸을 꼭 하나의 행이나 열로 설명할 수 없는 경우에는 스크린 리더를 포함한 접근성 보조기술이 표를 읽는 것에 어려움을 겪을 수 있습니다. colspan과 rowspan 특성이 존재하면 복잡한 표라고 생각할 수 있습니다.
표의 내용을 나눠서 colspan과 rowspan이 없는 작은 표 여러 개로 표현하는 것이 이상적입니다. 보조 기술 사용자는 물론 인지력이 저하된 사용자가 표의 레이아웃을 이해하는 수고를 줄일 수 있습니다.
그러나 표를 쪼갤 수 없는 경우에는 id와 headers 특성을 사용해서 칸 각각이 속한 헤더를 직접 가리키세요.
명세
브라우저 호환성
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 지원 | 12 | 1 | 지원 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 지원 | 4.4 | 18 | 4 | 1.0 |