2.3.2 <thead>,<tbody>,<tfoot>으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능)
장애 유형
- 장애 유형
- 비장애
- 오류 설명
-
<tbody>의 내용이 긴 경우, 브라우저에 따라 테이블 인쇄 시에 <thead><tfoot>을 매 페이지에 인쇄 가능함.
오류 유형
제목 행이 <thead>로 그룹핑 되지 않음
- 오류 예시
- 업종별/전일대비/등락그래프 셀은 제목 행으로 그룹핑이 가능하지만 <thead>로 제공되지 않고 내용과 함께 <tbody>로 제공됨
- 참고 이미지
- 해결 방법
-
업종별/전일대비/등락그래프 셀을 <thead>로 그룹핑
... <thead> <tr> <th scope="col">업종별</th> <th scope="col">전일대비</th> <th scope="col">등락그래프</th> </tr> </thead> <tbody> ...
모바일 환경에서 제공되는 표의 제목 행이 <thead>로 그룹핑 되지 않음
- 오류 예시
- 업종별/전일대비/등락그래프 셀은 제목 행으로 그룹핑이 가능하지만 <thead>로 제공되지 않고 내용과 함께 <tbody>로 제공됨
- 참고 이미지
- 해결 방법
- 업종별/등락률/관련종목 셀을 <thead>로 그룹핑
바른 예시
<thead>, <tfoot>, <tbody> 바른 예시
- 참고 이미지
- 코드 예시
-
<table> <caption>나간돈</caption> <thead> <tr> <th scope="col">사용내역</th> ... </tr> </thead> <tfoot> <tr> <th scope="row" id="sum">합계</th> ... </tr> </tfoot> <tbody> <tr> <th scope="row" id="item">버스비</th> </tbody> </table>
주의 사항
- 레이아웃용 테이블에 데이터 테이블 엘리먼트(caption, th, tbody, thead, tfoot)를 사용한 경우 오류로 처리함.
- th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능
평가 방법
- <table>이 없는 경우 해당 없음 처리
테이블 확인 및 <thead>,<tbody>,<tfoot> 그룹핑 확인
- 평가 도구
- N-WAX
- 평가 방법
- 2.3.2 표 구조화에서 <table> 별로 항목이 생성되는데 항목별로 <thead>,<tbody>,<tfoot>가 적절히 제공되었는지 확인
- 참고 이미지
모바일 환경에서 테이블 확인 및 <thead>,<tbody>,<tfoot> 그룹핑 확인
- 평가 도구
- User Agent Switcher(파이어폭스 부가기능), N-WAX
- 평가 방법
- Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용해 PC환경에서의 평가와 동일하게 진행함