표의 헤더 행 그룹. tbody의 본문 행과 시맨틱 분리. 시각적 차이뿐 아니라 스크린리더의 셀 발화, 인쇄 시 헤더 반복, 검색의 표 추출에 모두 영향.
SEO 관점에서 thead가 명시되면 검색엔진이 어느 행이 헤더이고 어느 행이 데이터인지 즉시 인식. Table Snippet 추출 정확도 ↑.
GEO 관점에서 AI가 비교 답변에 표를 활용할 때 — thead의 헤더 텍스트가 각 데이터의 라벨로 활용. 헤더 없는 표는 AI가 어느 칸이 무엇인지 추측에 의존.
A11y 관점에서 스크린리더가 데이터 셀을 읽을 때 해당 열 헤더를 자동 함께 발화. "Basic, 월 요금, 9900원". thead 없으면 "Basic, 9900원"만 — 9900원이 무슨 의미인지 사라짐.
자주 보는 안티패턴: thead 없이 tr + th(브라우저가 자동 보정하기도 하지만 명시적 thead가 안전), thead 안 td(헤더 행인데 th 아닌 td — scope 정보 손실), 여러 thead(table당 한 개), thead 안에 실제 데이터 행을 잘못 박는 경우.
rowspan·colspan — 복잡한 헤더에서 셀 병합. 다단계 헤더 구조. 시각·시맨틱 모두 보존되지만 복잡할수록 a11y 검증 필요.
<table>의 자식 순서 — caption → colgroup → thead → tbody → tfoot. 이 순서가 명세상 권장. 다만 브라우저는 순서 위반도 자동 보정하므로 큰 차이는 없다.
인쇄 시 헤더 반복 — 긴 표가 여러 페이지로 인쇄될 때 각 페이지에 헤더 반복되는 게 thead의 무료 기능. CSS thead { display: table-header-group; }가 기본. 사용자가 표를 인쇄해도 모든 페이지에서 헤더 인지.
display: contents 적용 시 — 시리즈 #7에서 다룬 디자인 자유 패턴. thead { display: contents }로 시각은 grid의 한 줄, 시맨틱은 thead 보존. 일부 브라우저에서 thead의 인쇄 헤더 반복이 깨짐 가능 — 검증 필요.
UI 라이브러리 — TanStack Table 같은 headless 라이브러리는 사용자가 직접 thead/tbody/tr/th/td 마크업. 시맨틱 정답 유지 가능. 디자인은 자유.