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”라는 알파벳이 다를 뿐 사용에 있어서는 똑같습니다.

  • CN

    맞는 말입니다. 올블로그에 링크되어 있다면 추천이라도 한방 해줬을 것 같습니다.

  • 3배쯤 귀찮고 20배쯤 어렵습니다. 🙂

  • 동의해주시는 분이 계시니 기쁠 따름입니다~ 🙂

  • 그런가요? ㅎㅎ 아는 만큼 본다고, 제가 1.5배 만큼 밖에 몰라서 1.5배 만큼만 어려운가봐요 공부를 좀 더 해야겠네요 ^^
    메뉴얼 같은걸 보고 한다면 어려운 것 보다는 귀찮은게 훨씬 클 것 같아요, 특히 디자이너들은.. 흑

  • 뭔가 생소한 내용이;;;
    모르는 사람이 보기엔 웹디라기보단 프로그래머 같아요.
    후~ 쿠키님같은 웹디들이 많으면 코더들이 정말 편할것 같은데요. 코딩을 고려한 디자인이란게 말처럼 쉬운 건 아니지만 ^^;

  • 코딩에 관심많은 디자이너죠 뭐;
    저 자신도 관심이 많지만 어차피 일이라는 것이 디자인에서 개발로 넘어가기 때문에 중간과정인 디자이너들의 손길도 중요하다고 생각하거든요 ^^ㅋ
    어차피 나중엔 디자이너도 이득을 보니까 간과할 수 없는 부분이라고 생각돼요~

  • 이건 태터툴즈에 건의한 XHTML 관련 개선 사항 중 달력 부분에도 적용해달라고 했던 것입니다. 사실 저도 아직 thead, tbody, colgroup 이런 태그까지는 다 못 쓰겠고 th 정도만 써도 상당한 도움이 됩니다.

    테이블을 사용하는 고급 기법까지 가는 건 쉽지 않지만 td 대신 th를 적절히 활용하는 건 당장부터 적용할 수 있겠죠.

  • 제말이 그말 입니다 ^^ th만 사용해줘도.. !!!

  • 아아.배부르다;

  • th쓰니까 배불러요? ㅎㅎ

  • Pingback: kukie » table에 th를 사용해 보자()