다소 복잡한 데이터 테이블
다수의 th 부모들이 존재할 경우
| 수입 | 저축 | 프로젝트 금액 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 년월 | 주수입 | 부수입 | 수입총액 | 청약 | 적금 | 남는돈 | 프로젝트통장 | 추가금액 | 누적금액 | |
| 달성율 | 5.1% | |||||||||
| 2008년 01월 | 3,450,000 | 0 | 3,450,000 | 100,000 | 1,000,000 | 0 | 0 | 0 | 51,000,000 | |
| 2008년 02월 | 2,338,000 | 0 | 2,338,000 | 100,000 | 1,000,000 | 0 | 0 | 0 | 51,000,000 | |
| 2008년 03월 | 4,700,000 | 0 | 4,700,000 | 100,000 | 1,000,000 | 0 | 0 | 0 | 51,000,000 | |
복잡시런 테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample01.txt (새창은 Shitf+클릭)
여러개의 헤더셀을 포함한 큰 헤더셀이 있으며, 좌측 컬럼에도 헤더셀이 있습니다. 마크업을 살펴보겠습니다. summary 뒤에 있는 rules 속성은 셀의 구분선 표시형식을 정의하는 것으로 행 사이의 구분선을 표시할 경우에 ‘rows’, 열 사이에 구분선을 표시할 경우에 ‘cols’, 그룹핑 단위로 구분선을 표시할 경우에는 ‘groups’를 지정합니다. 이때 그룹핑은 thead, tbody, tfoot 이 되며 저는 ‘all’ 로 지정하였습니다. thead 속성에도 디자인이 가능하지만 rules 속성으로도 디자인이 가능합니다. colgroup 요소는 열의 그룹핑을 위한 요소로써, 둘 이상의 열을 그룹핑 할 경우 span 속성을 통해서 갯수를 정의할 수 있습니다. 내용셀과 헤더셀을 살펴보면 각 헤더셀에 id 를 부여하고, 여러개의 제목셀을 갖는 내용셀에는 headers 속성을 사용하여 현재의 내용셀의 제목이 여러개 존재함을 알리고 있습니다. 아니 근데,
테이블 하나가지고 div, css 코딩하는것도 아니고 접근성 개선사업으로 바쁜데 언제 이렇게 하고 있을까요?
더 단순한 마크업 방법이 있습니다!
scope 속성만으로도 위와 동일한 결과를 간단히 만들 수 있습니다. 바로 scope 속성값중에 ‘colgroup’ 속성값과 ‘rowgroup’ 속성값이 있습니다.
scope 의 colgroup 속성값으로 만든 동일한 결과를 만들다
scope 속성만을 이용한 해결법 예제소스 : http://www.hiweb.kr/sample/ex00/table_sample02.txt (새창은 Shitf+클릭)
scope 속성만을 이용한 예제와 같이, scope 속성값중 colgroup 값을 사용하여 행을 그룹화 하였고, 좌측 컬럼에 존재하는 헤더셀에는 scope 값으로 row 를 지정해 주어 모든 헤더셀과 내용셀이 명시적으로 논리적인 관계를 갖기 때문에 굳이 id, headers 속성을 사용하지 않아도 됩니다. 또한 html 의 파싱순서에 따라 화면낭독기는 좌상단으로부터 우하단으로 Z 모양으로 반복해서 읽을 것 입니다. 위 예제에는 없지만, 좌측 컬럼의 헤더셀이 rowspan 속성으로 상하셀이 결합되어 그룹화가 되어 있고 바로 옆에 또 다른 자식 헤더셀이 존재할 경우 scope="rowgroup" 이 되겠죠. 때문에 id, headers 속성까지 사용하는 일은 거의 전무하다고 판단됩니다.
이렇게 제목셀과 내용셀의 관계를 명시적으로 지정한 경우 화면낭독기 또는 그 외의 장치가 이것을 의미있게 받아들이는 경우 내용셀을 읽기 전에 현재 내용셀과 연관된 제목셀을 먼저 읽어 주는등 다양한 확장성과 향상된 경험을 줄 수 있습니다.
axis 라는 속성도 있습니다. axis 속성은 id 속성과 headers 속성으로 연결된 셀들을 카테고리화 할 수 있어서 사용자가 표로부터 원치 않는 정보(셀)를 제외한 보다 정확한 정보를 제공받을 수 있도록 처리하는데 도움을 줍니다.
우습게 시작했던 테이블이 가면 갈수록 어려워지는 건
테이블을 css 로 디자인하면서 언젠가 "아 thead 와 tbody 로도 디자인이 가능하구나" 라고 느꼈던것이 그리 오래되지 않았는데 rules 속성으로도 디자인이 가능하다는 것을 새로 알게 되었고, 절대 복합한 테이블에서 등장하는 axis 속성의 원치 않는 셀 분리, 헤더셀들의 그룹화, 스크린리더 읽는 순서 지정문제등 알면 알수록 어려워 지는 바로 이 테이블, 국내 스크린 리더의 미비한 지원 문제점까지 있는 이 상황에 저는 이렇게 생각해 봅니다.
Table 요소를 표로써 제대로 사용하는 것. 쉬운 결정이지만 결코 만만치 않은 일이다.
헛! 댓글이 있어요
-
DestWin2009/04/16 22:05
어렵당 ㅡ-)
-
옥2009/04/29 23:29
그러게 어렵다 나도 배워야 하는데 뉴뉴