2009년 April 7일

Thead, tbody, tfoot 를 사용하는 이유

 요즘 회사에서 웹 표준에 대해 공부하고 있습니다. 헌데, 제가 유지보수하고 있는 사이트에서 최근에 한가지 일이 떨어졌더군요. 다름아닌 “장애인차별금지 및 권리구제 등에 관한 법률 시행을 위한 웹 접근성 준수 가이드라인 개발 계획(안)” 에 근거하여 사이트를 4월 11일까지 이에 맞게 수정하라는 것이었습니다.

 때문에 웹 표준에 대해 조사하던 도중, thead/tbody/tfoot 라는 것에 흥미가 생겨서 회사에서 조사해 보게 되었지요. [ 체크리스트13 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다. ]라는 항목이 있었기 때문에.. 아무튼 내용을 다시한번 정리하오니, 참조하실분은 참조하시길 바랍니다 🙂

  1. 특징
  2. 테이블 내에 다양한 테그 사용으로 접근성을 높이고 CSS에서 더 쉬운 참조를 위해 사용한다.
  3. 테그 이외에도
    ,
    등에서 데이터의 효율적인 구성과 관리를 높이기 위해 사용된다.
  4. Thead는 머리말 부분, tbody는 본문, tfoot는 꼬리말로 정의하여 thead~tbody~tfoot까지가 하나의 세트로 사용되고, 하나의 id로 CSS에서 관리될 수 있다.

  5. 효율성
    7. 는 ,
    는 , 는 와 비슷한 의미로 사용되며, 이렇게 정의된 묶음 데이터는 하나의 아이디로 관리되며, CSS에서 한번에 수정될 수 있다.
  7. Thead,tbody,tfoot는
    8. 테그에서만 사용되는 것이 아니고, 일반적으로 여러 개의 행을 하나의 그룹으로 묶어주는 역할을 하며, 어떠한 html페이지 내의 데이터에 대해 데이터적이니 의미를 부여하기 위하여 사용된다.
  8. 또한, 하나의 테그 내에서 사용되는 내용들(ex : vspacing,
    style=”… )     을 css파일에서 통합적으로 관리할 수 있고, 페이지를 로딩한 후 CSS에서 이와 같은 비쥬얼에 대한 부분을 처리함으로서 획일적(①데이터 로딩 ②비주얼 랜더링 처리)이고 효율적인 랜더링 및 처리가 가능하다.

  9. 기존 테이블과 구분점
    11. 테그는 기본적으로 복잡한 넓이 계산 알고리즘을 거쳐서 랜더링 되는데 이 알고리즘은 셀안의 컨텐츠와 셀에 지정된 넓이를 바탕으로 최적의 테이블 레이아웃을 계산하는 것이다.
  11. 보통 width를 정확히 지정해도 이가 나오지 않을 경우가 많은데, 이를 table-layout 속성을 이용해서 보완 할 수 있다.
  12. Css에서        
    아래와 비슷한 형식으로 table-layout 을 지정한다.

    13. Table{

    Table-layout:fixed;

    }

  13. 웹 접근성/장애인 과
    thead    의 관계
    15. 에 관련된 내용은 “장애인“과는 무관하다 판단하여 최종 가이드라인에서 제외되었음.
  15. 그러나, 표에서 th와 td를 구분하는 내용이 있으며, 게시판 등의 표에서 제목과 내용을 구분하라는 의미로 보임.
  16. 이는 코딩적인 부분에 크게 중점을 둔 것이라기보다는, 게시판 등에서
    17. 테그를 통해 (제목들을)따로 처리하고, 테그를 통해 내용들을 따로 처리(여기서 처리란, 시각적인 처리와 데이터를 재사용하는 처리를 말함.)한다는 의미로 보임.

  17. 참조
    URL
  18. W3c의 표준 문서 : http://www.w3.org/TR/WD-html40-970708/struct/tables.html
  19. 테그 내의 사용의 예와 정보 : http://www.cyworld.com/jutlper/315594
  20. HTML 5에서 thead의 설명 : http://dev.w3.org/html5/spec/Overview.html#the-thead-element
  21. 서울시 웹 표준 가이드 : http://waf.seoul.go.kr/accessibility/accessibility_01.html