noimage

table에는 th를 사용해 주세요

디자이너들에게 하는 말입니다. 다른 직업군에게도 포함될지는 모르겠네요.

올바르게 data를 넣은 table을 사용하는 방법은 우리가 그동안 table기반의 layout을 짜던 것 보다는 3배쯤 귀찮고 1.5배쯤 어렵습니다.
summary와 caption이 들어가며 thead나 tfoot·tbody도 필요하고 scope도 제공하고 id도 부여하고.. 어쩌구저쩌구.. 좀 더 정확한 정보를 알고 싶다면 다음의 링크를 방문해 보시길 권합니다.

다만 제가 디자이너들에게 가장먼저 권해줄 수 있는 한가지는 th(table head)를 사용하라는 것입니다.
기타 다른 설명 다 제외하고 단순무식하게 말하면,

th를 사용하므로써 table의 첫번째 줄(row)을 다르게 코딩해줘야 할 필요가 없어집니다.
예를 들면 일반형 형태의 게시판 첫쨋줄을 보면 “제목 | 이름 | 날짜 “라고 알려주는 부분 있죠?
거기만 td에서 th로 바꿔보세요. 그리고 CSS에서 th에 아까 첫번째 줄(tr)이나 첫번째 줄의 각 cell(td)에 넣었던 style을 적용시켜 보세요.
간단하죠?
table을 table자체와 th, td로 나눠서 관리함으로써 스타일 지정할때 굳이 css를 하나더 추가해서 td class=”머시기” 이렇게 지정해줘야 할 필요도 없고, 사실은 기계도 알아보기 편해져요. 시각에 어려움이 있어서 스크린리더를 사용하는 사람들에게도 정확한 정보를 제공해 줄 수 있고요.
스크린 리더에 대해 얘기 하기 시작하면 table에 어떤 정보를 더 넣어줘야 할지 복잡하기 짝이 없지만 여기서는 th만이라도 먼저 써보라고 얘기해 봅니다.

 

th도 td와 똑같아서 colspan이나 rowspan도 마음 껏 쓸 수 있어요.
의미와 “h”라는 알파벳이 다를 뿐 사용에 있어서는 똑같습니다.