HTML <thead> 태그 – 올바른 이해와 사용 방법

`<thead>` 태그의 정의 및 사용법

<thead> 태그는
테이블 헤더(table head, 머리글)에 해당하는 행(<tr> 태그)들의 그룹을 나타냅니다.

이 태그는 부모 테이블의 제목이나 설명 정보를 포함하는 행들로 구성된 테이블 헤더를 정의할 때 사용되며,
테이블 헤더와 본문의 테이블 데이터를 명확하게 구분하는 정보로 활용하는데 도움이 됩니다.

주요 마크업 규칙

<thead> 태그의 부모는 <table> 태그이어야 합니다.
<thead> 태그의 자식은 0개 이상의 <tr> 태그이어야 합니다.
테이블당 <thead> 태그는 없거나 하나만 있어야 합니다. (테이블의 구조적 명확성을 위해)

전체적인 마크업 규칙은 기술적인 문법 요약을 참고하세요.

데모

데모 예제들로 <thead> 태그의 사용 방법을 확인해 보세요.

간단한 테이블 헤더 구조

다음의 데모 예제는 제목으로 사용되는 헤더 셀(<th> 태그)들이 포함된 한 개의 행(<tr> 태그)으로 구성된 간단한 테이블 헤더 구조(<thead> 태그)입이니다.

HTML

<table>
    <thead>
        <tr>
            <th scope="col">메뉴</th>
            <th scope="col">가격</th>
        </tr>        
    </thead>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

코드 부연설명
scope 속성은 헤더 셀이 어떤 범위의 셀과 관련이 있는지 명확하게 지정하는 속성입니다.

CSS의 padding 속성으로 요소 안쪽에 여백 간격을 주고, border 속성으로 <td>와 <th>의 경계에 1px의 회색 테두리 지정했습니다. <thead>에는 옅은 회색의 배경색을 추가해서 테이블 헤더라는 것을 쉽게 구별할 수 있도록 했습니다.

실제 적용된 모습

메뉴	가격
라면	5,000
김밥	4,000

여러 행으로 구성된 테이블 헤더 구조

이 데모 예제에서는 <thead> 태그 내에 두 개의 행(<tr> 태그)을 포함하여 다중 행 테이블 헤더(<thead> 태그)를 생성함으로써, '간단한 테이블 헤더 구조 예'에서의 테이블의 마크업을 확장한 것입니다.

HTML

<table>
    <thead>
        <tr>
            <th rowspan="2" scope="col">자동차 모델</th>
            <th colspan="2" scope="colgroup">주요 정보</th>
        </tr>
        <tr>
            <th scope="col">제조사</th>
            <th scope="col">연식</th>
        </tr>
    </thead>
    <tr>
        <td>아반떼</td>
        <td>현대</td>
        <td>2,020 년도</td>
    </tr>
    <tr>
        <td>소렌토</td>
        <td>기아</td>
        <td>2,022 년도</td>
    </tr>
</table>

CSS는 이전 예제와 동일합니다 .

실제 적용된 모습

자동차 모델	주요 정보
아반떼	현대	2,020 년도
소렌토	기아	2,022 년도

속성

<thead> 태그는 모든 전역 속성만을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

align
bgcolor
char
charoff
valign

기술적인 문법 요약

thead 태그의 구문 형식
허용되는 부모 요소	`<table>`의 자식으로서, 반드시 `<caption>` 또는 `<colgroup>` 뒤에 위치해야 하지만, `<tbody>`, `<tfoot>`, `<tr>` 앞에 위치해야 합니다. 히지만, `<table>`의 자식인 다른 `<thead>`가 없는 경우에만 가능(여러 개의 `<thead>`을 배치할 수 없다는 의미)합니다.
허용되는 콘텐츠	없거나, `<tr>` 또는 (스크립트를 지원하는 `<script>` 및 `<template>`도 허용됩니다.)
암시적인 `role` 속성 값	`rowgroup`
허용된 `role` 속성 값	모두(Any)

`<thead>` 태그의 유용성

<tbody>(테이블 본문), <tfoot>(테이블 푸터) 태그와 함께 <thead> 태그는 테이블 헤더와 본문 데이터를 명확하게 구분하는 데 사용됩니다.
이러한 태그들을 올바르게 사용하면, HTML의 의미론적 측면에서 접근성 도구(예: 스크린 리더)나 검색 엔진 등 다양한 보조 기술에서 더 나은 테이블 구조를 파악하는 정보로 활용하는데 도움이 됩니다.