요즘 회사에서 웹 표준에 대해 공부하고 있습니다. 헌데, 제가 유지보수하고 있는 사이트에서 최근에 한가지 일이 떨어졌더군요. 다름아닌 “장애인차별금지 및 권리구제 등에 관한 법률 시행을 위한 웹 접근성 준수 가이드라인 개발 계획(안)” 에 근거하여 사이트를 4월 11일까지 이에 맞게 수정하라는 것이었습니다.
때문에 웹 표준에 대해 조사하던 도중, thead/tbody/tfoot 라는 것에 흥미가 생겨서 회사에서 조사해 보게 되었지요. [ 체크리스트13 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다. ]라는 항목이 있었기 때문에.. 아무튼 내용을 다시한번 정리하오니, 참조하실분은 참조하시길 바랍니다 🙂
- 특징
- 테이블 내에 다양한 테그 사용으로 접근성을 높이고 CSS에서 더 쉬운 참조를 위해 사용한다.
- <table>테그 이외에도 <div>,
<form>등에서 데이터의 효율적인 구성과 관리를 높이기 위해 사용된다. - Thead는 머리말 부분, tbody는 본문, tfoot는 꼬리말로 정의하여 thead~tbody~tfoot까지가 하나의 세트로 사용되고, 하나의 id로 CSS에서 관리될 수 있다.
- 효율성
- <thead>는 <head>,
<tbody>는 <body>, <tfoot>는 <foot>와 비슷한 의미로 사용되며, 이렇게 정의된 묶음 데이터는 하나의 아이디로 관리되며, CSS에서 한번에 수정될 수 있다. - Thead,tbody,tfoot는 <table>테그에서만 사용되는 것이 아니고, 일반적으로 여러 개의 행을 하나의 그룹으로 묶어주는 역할을 하며, 어떠한 html페이지 내의 데이터에 대해 데이터적이니 의미를 부여하기 위하여 사용된다.
- 또한, 하나의 테그 내에서 사용되는 내용들(ex : vspacing,
style=”… ) 을 css파일에서 통합적으로 관리할 수 있고, 페이지를 로딩한 후 CSS에서 이와 같은 비쥬얼에 대한 부분을 처리함으로서 획일적(①데이터 로딩 ②비주얼 랜더링 처리)이고 효율적인 랜더링 및 처리가 가능하다. - 기존 테이블과 구분점
- <table>테그는 기본적으로 복잡한 넓이 계산 알고리즘을 거쳐서 랜더링 되는데 이 알고리즘은 셀안의 컨텐츠와 셀에 지정된 넓이를 바탕으로 최적의 테이블 레이아웃을 계산하는 것이다.
- 보통 width를 정확히 지정해도 이가 나오지 않을 경우가 많은데, 이를 table-layout 속성을 이용해서 보완 할 수 있다.
- Css에서
아래와 비슷한 형식으로 table-layout 을 지정한다. - 웹 접근성/장애인 과
thead의 관계 - <thead>에 관련된 내용은 “장애인“과는 무관하다 판단하여 최종 가이드라인에서 제외되었음.
- 그러나, 표에서 th와 td를 구분하는 내용이 있으며, 게시판 등의 표에서 제목과 내용을 구분하라는 의미로 보임.
- 이는 코딩적인 부분에 크게 중점을 둔 것이라기보다는, 게시판 등에서 <th>테그를 통해 (제목들을)따로 처리하고, <td>테그를 통해 내용들을 따로 처리(여기서 처리란, 시각적인 처리와 데이터를 재사용하는 처리를 말함.)한다는 의미로 보임.
- 참조
URL - W3c의 표준 문서 : http://www.w3.org/TR/WD-html40-970708/struct/tables.html
- <table>테그 내의 <thead> 사용의 예와 정보 : http://www.cyworld.com/jutlper/315594
- HTML 5에서 thead의 설명 : http://dev.w3.org/html5/spec/Overview.html#the-thead-element
- 서울시 웹 표준 가이드 : http://waf.seoul.go.kr/accessibility/accessibility_01.html
Table{
Table-layout:fixed;
}
