※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성함
테이블(Table) : <table>_b
<table>_b : 웹 문서에서 표를 만드는 요소
<table>은 block요소이며 기본적으로 행과 열을 가지고 있다.
<th>: 열이나 행의 제목. 이 요소 안의 내용을 볼드 처리 되며 중앙 정렬된느 특징이 있다.<tr>: 행을 만드는 요소<td>: 열을 만드는 요소. '셀(cell)' 이라고도 한다.- rowspan : 행 합치기
- colspan : 열 합치기
<caption>: 테이블의 제목<thead>: 머리말<tbody>: 본문<tfoot>: 꼬리말 - 테이블에 대한 수치 결과값 등 데이터에 대한 결과가 있을 때만 마크업해주고 그 외에는<thead>요소와<tbody>요소만 마크업한다.
※ 본문(tbody)보다 꼬리말(tfoot)을 먼저 마크업해도 결과 화면에서는 본문 다음 꼬리말 순으로 내용 흐름에 맞게 출력된다.
그렇다면 왜<tbody>보다<tfoot>을 먼저 마크업해야 할까?
웹페이지가 화면이 아닌 음성으로만 지원되는 환경(스크린 리더)에서는 테이블에 대한 정보를 마크업한 순서대로 접근하여 읽어 주기 때문에<thead>다음<tfoot>에 대한 정보를 먼저 제공하여 전체적인 내용을 파악할 수 있게 하고 그다음 본문으로 내려가도록 하는 것이 효율적인 방법이다. (들어 봤을 때 관심이 없는 내용이라면 굳이 긴 본문의 내용을 모두 다 들을 필요 없으니까)
예제를 보며 참고해보자.
<table border="1" width="100%">
<caption>태블릿 PC와 스마트폰 판매현황</caption>
<colgroup>
<col width="20%" />
<col width="40%" />
<col width="40%" />
</colgroup>
<thead>
<tr>
<th scope="col">구분</th>
<th scope="col">태블릿 PC</th>
<th scope="col">스마트폰</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">총판매수</th>
<td>5만대</td>
<td>16만대</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">상반기 판매수</th>
<td>2만대</td>
<td>5만대</td>
</tr>
<tr>
<th scope="row">하반기 판매수</th>
<td>3만대</td>
<td>11만대</td>
</tr>
</tbody>
</table>이를 출력하면 다음과 같다.
| 구분 | 태블릿 PC | 스마트폰 |
|---|---|---|
| 총판매수 | 5만대 | 16만대 |
| 상반기 판매수 | 2만대 | 5만대 |
| 하반기 판매수 | 3만대 | 11만대 |
<th>요소에 있는 'scope'속성은 열의 제목(scope="col")과 행의 제목(scope="row")이 어떤 것인지 알려준다. 음성만으로 정보를 전달하는 환경에서는 테이블에 대한 정보를 정확히 이해하기란 쉽지 않기 때문에 필요하다.
만약 현재의 커서 위치를 '2만대'셀로 이동시 음성으로 그냥 '2만 대'라고 읽어주면 이것이 무엇에 대한 '2만 대'인지 알 수 없다. 그런데 이것을 '태블릿 PC. 2만 대'라고 읽어준다면 정보를 이해하는데 훨씬 더 수월할 것이다.
스크린 리더마다 조금씩 차이는 있겠지만 보통 scope 속성을 주면 위 표를 예시로 했을 때 다음과 같이 읽어준다.
"구분" → "상반기 판매수" → "태블릿 PC 2만 대" → "스마트폰 5만 대"
스크린 리더 중에서는 <th>요소만 잘 써 줘도 위와 같이 ㅇ릭어주는 경우가 있지만, 접근성 높은 데이터 테이블을 제작하기 위해서 <th>요소에 'scope'속성을 꼭 넣어 주시기 바란다.
다음은 셀 합치기가 된 경우의 테이블 접근성을 높일 수 있는 방법을 알아보자.
<h5>colgroup</h5>
<table border="1" width="100%">
<caption>상품에 따른 월별 판매현황</caption>
<colgroup>
<col width="20%" />
<col width="25%" />
<col width="25%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th rowspan="2" scope="col">구분</th>
<th colspan="3" scope="colgroup">상품종류</th>
</tr>
<tr>
<th scope="col">스마트폰</th>
<th scope="col">태블릿PC</th>
<th scope="col">데스크탑PC</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1월</th>
<td>5만대</td>
<td>3만대</td>
<td>1만대</td>
</tr>
<tbody>
</table>
<br/>
<h5>id, headers</h5>
<table border="1" width="100%">
<caption>상품에 따른 월별 판매 현황</caption>
<colgroup>
<col width="20%" />
<col width="25%" />
<col width="25%" />
<col width="30%" />
</colgroup>
<thead>
<tr>
<th rowspan="2" id="division">구분</th>
<th colspan="3" id="product">상품종류</th>
</tr>
<tr>
<th header="product" id="smartphone">스마트폰</th>
<th header="product" id="tabletpc">태블릿PC</th>
<th header="product" id="pc">데스크탑PC</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="division">1월</th>
<td headers="product smartphone">5만대</td>
<td headers="product tabletpc">3만대</td>
<td headers="product pc">1만대</td>
</tr>
<tbody>
</table>이를 출력하면 다음과 같다.
colgroup
| 구분 | 상품종류 | ||
|---|---|---|---|
| 스마트폰 | 태블릿PC | 데스크탑PC | |
| 1월 | 5만대 | 3만대 | 1만대 |
id, headers
| 구분 | 상품종류 | ||
|---|---|---|---|
| 스마트폰 | 태블릿PC | 데스크탑PC | |
| 1월 | 5만대 | 3만대 | 1만대 |
-
셀을 합친 경우, 접근성을 높일 수 있는 방법에는 두 가지가 있는데 그 첫 번째 방법이 'colgroup'이다.
첫 번째 테이블 마크업을 보면 '상품종류'셀은 '열 합치기'가 되어 있으며 아래 '스마트폰', '태블릿 PC', '데스크탑 PC' 제목 셀들의 큰제목이 된다. 이런 경우 '상품종류' 제못 셀 안에 'scope' 속성값을 col이 아닌 'colgroup'으로 주면 된다.
-
두 번째 방법은 'id'와 'headers'속성을 이용하는 방법이다.
'id'는 제목 셀에 이름을 부여하는 것이고 'headers'는 제목 셀 'id'의 내용을 참조한다고 보면 된다.두 번째 테이블 마크업을 보면 '상품종류' 셀에 id 'product'를 부여 하였고 아래 각 제목 셀들('스마트폰', '태블릿 PC', '데스크탑 PC')에 각각 id 'smartphone', 'tabletpc', 'pc'를 부여 하였다. 또, headers 속성을 이용하여 상품종류 셀('product')을 참조하게 하였다.
3행 2열의 '5만 대' 셀의 경우 headers 속성을 이용하여 그 열의 제목 셀인 상품종류('product')와 스마트폰('smartphone')을 참조하게 하였다.
-
첫 번째 테이블과 두 번째 테이블을 각각 scope 속성값 'colgroup', 'id, headers' 속성과 같이 서로 다른 방식을 이용하여 마크업하였지만 스크린 리더에서는 같은 결과를 얻을 수 있다.
"구분" → "1월" → "상품종류 스마트폰 5만 대" → "상품종류 태블릿PC 3만 대"
※ scope 속성의 colgroup 값은 셀 합치기가 단순한 구조로 되어 있을 때 사용하며 id와 headers는 셀 합치기 구조가 복잡할 때 주로 사용한다.
