header, section, footer 태그와 같이 표 내에서 머릿말, 본문, 꼬릿말 영역을 나눠주는 태그이다.

html5가 나오기 전에는 table을 이용해 웹 사이트를 만들었다고 한다.

tbody를 생략한 채 표를 작성해보았다.

요소검사를 해보면 태그를 생략했음에도 웹 브라우저에선 tbody가 제대로 찍혀나온다.

브라우저가 자동 수정을 해준다는 건 그만큼 컨텐츠에 맞춰 머리말과 본문을 태그로 나누는 작업이 중요하다는 의미인 것 같다. (특히 시맨틱 태그의 등장을 생각하면.)

scop을 이용해 스크린 리더기가 읽는 방향을 지정할 수 있다.

원래대로라면 가로 방향으로 한 줄씩 읽히겠지만

각 th(번호, 나이, 동)에 scope="col"을 적용해 세로 방향으로 한 줄씩 읽히게 바꿨다.

예시로 든 표는 간단한 편이지만 이보다 더 복잡한 표라면 어떨까?

내가 원하는 건 제목과 셀을 지그재그로 읽게 하는 거였는데 scope으로 하려니 너무 헷갈리고...

티스토리를 뒤져봐도 scope을 사용하는 건 정말 간단한 표 예시밖에 없었다.

하지만 headers와 id를 이용한 방법을 찾았습니다. ◠‿◠

headers란 말 그대로 th의 id를 읽어주는 속성이다.

th 마다 id를 부여하고 td안에 headers 속성을 삽입한 후 해당 셀과 관련있는 id를 순서대로 호출하는 방식이다.

아까보다 더 복잡한 표를 만들어봤다.

headers 속성을 지정하게 되면 해당 셀 내용을 읽기 전에 headers에 담겨있는 id에 해당하는 셀 내용을 먼저 읽는다.

따라서 '행정지원팀'은 구분 > 민원행정과 > 행정지원팀 순으로 읽히고,

그 옆에 있는 '0120-8854-3544'는 구분 > 민원행정과 > 행정지원팀 > 전화번호 > 0120-8854-3544 순으로 읽힌다.

scope 보다 명확한 표기가 가능하지만 아이디가 계속 늘어남에 따라 태그가 복잡해지는 건 단점인 것 같다.

작성 시 유의사항

table 바로 다음에 오는 태그로, 표 상단에 제목을 표시할 수 있다.