티스토리 뷰

분류없음

[ HTML5 기초 ] table 태그 완전정복

깃털여사 깃털여사 2017.08.31 14:53

table 태그는... 너무너무 유명한 태그이고,

아주아주 오래전에는 전체 화면의 레이아웃을 아예 talble태그로 잡았을 만큼 널리 쓰이던 태그였습니다만,

반응형에 취약한 특성과 웹접근성과 관련된 여러 이슈들 덕분에 지금은 그 위상이 많이 하락한 상황입니다.


하지만, 그럼에도 불구하고 꼬오오옥 꼭 꼭 테이블을 써야 하는 상황이 있기 마련이고,

그런 때에는 웹접근성의 문제에 많은 신경을 써줘야 합니다.


예전에는... table, tr, td 정도만 가지고도 훌륭이 기능하였으나,

지금 그렇게 코딩했다간... 웹접근성에 걸려서 페이지가 통째로 날아가는 수가 있으므로, 

table을 웹접근성에 맞게 코딩하는 법을 익히는 것은 여전히 매우 중요한 일입니다.


table 쌩기초...

<table>    - 표를 만들고

<tr>        - 표 안에 줄을 만들고

<td>들어갈 내용</td>     - 줄 안에 칸을 나눕니다.

</tr>

</table>


table 에 웹접근성 적용하기

<table summary="경제지표목록">    - 표를 만들고 표에 대한 간단한 설명을 붙여둡니다.

<caption>경제지표목록</caption>    - 표의 제목을 붙입니다.

<colgroup>    - 열의 너비를 지정합니다.

<col width="20%">

<col width="*">    - * 는 남는 공간 전부..라는 뜻입니다.

<col width="50%">

</colgroup>


<thead>    - 테이블의 헤더의 구분에 들어가는 내용들을 정리합니다.

<th scope="col">분야</th>    - scope 는 매우 중요하므로 아래쪽에 자세히 설명해두었습니다.

<th scope="col">지수내용</th>     - th 는 굵은 글씨로 강조되어 표시됩니다.

<th scope="col">날짜</th>

</thead>


<tbody>    - 이제 드디어 표의 진짜 내용이 시작됩니다.

<tr>        - 표 안에 줄을 만들고

<td>들어갈 내용</td>     - 줄 안에 칸을 나눕니다.

<td></td>

<td></td>

</tr>

</tbody>


<tfoot>     - 표의 아래부분입니다. 주로 통계표의 합게...란을 나타낼 때 사용됩니다.

</tfoot>

</table>


위쪽에서 붉은 글씨로 표현된 부분이 웹접근성을 위해서 추가된 부분입니다.

나머지는...이를테면 cellpadding 같은 것은... 다들... 아시죠?

게다가 왠만하면... css에서 조정하도록 합시다. 

문서의 내용은 html에서, 디자인은 css에서. 아시죠?



scope 란?


scope는 사용자가 음성도구를 이용할 때 해당 셀을 읽는 순서를 알려줍니다. 

즉 <th scope="col">은 '이 행은 세로로 읽어라'라고 음성도구에게 알려주는 것이고,

<td scope="row">는 '이 행은 가로로 읽어라"라고 음성도구에게 알려주는 것입니다.


즉 눈을 감고, 표의 내용을 떠올려 보면...

표의 헤더셀들을 먼저 떠올려야 표를 그리기가 쉬워지듯, 

음성도구에 의지하는 사용자들이 쉽게 표의 전체 구성을 파악할 수 있도록 

음성도구에게 해당 정보를 읽어나가는 방향...을 알려주는 역할을 합니다.


먼저... 제목셀들을 읽어서... 전체 항목이 어떤 것이 있는지를 알려주고,

그 다음 행부터 이어지는 헤더와 그 데이터를 차례로 읽어주는 것이죠.

표에 웹접근성을 적용할 때 가장 핵심이 되는 요소라고 할 수 있겠습니다. 



댓글
댓글쓰기 폼
Total
36,409
Today
42
Yesterday
46
«   2018/08   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31