HTML에서 테이블의 헤더(머리글) 영역을 만들려면 <thead> 태그를 사용합니다. <thead> 태그는 테이블에 헤더를 추가할 때 사용되며, <tbody>(본문) 및 <tfoot>(바닥글) 태그와 함께 사용하여 테이블을 구조별로 나누는 역할을 합니다.
thead 태그의 주요 속성
<thead> 태그는 아래와 같은 추가 속성을 지원합니다. 다만 이 속성들은 HTML5에서 더 이상 권장되지 않으며(Deprecated), 대신 CSS를 사용해 스타일을 지정하는 것이 좋습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | right left center justify char | 사용 중단됨 − 텍스트의 시각적 정렬 방식을 지정합니다. |
| char | 문자(character) | 사용 중단됨 − 텍스트를 정렬할 기준 문자를 지정합니다. align = "char"일 때 사용됩니다. |
| charoff | 픽셀 또는 % | 사용 중단됨 − char 속성으로 지정한 기준 문자로부터의 정렬 오프셋(픽셀 또는 백분율)을 지정합니다. align = "char"일 때 사용됩니다. |
| valign | top middle bottom baseline | 사용 중단됨 − 셀 내용의 수직 정렬 방식을 지정합니다. |
예제 코드
아래 코드를 실행하면 HTML에서 <thead> 태그가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML thead Tag</title> </head> <body> <table style = "width:100%" border = "1"> <thead> <tr> <td colspan = "4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan = "4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table> </body> </html>
정리
<thead>, <tbody>, <tfoot> 태그를 함께 사용하면 테이블의 구조를 명확하게 구분할 수 있어, 긴 표에서도 머리글과 바닥글을 일관되게 유지하며 접근성과 가독성을 높일 수 있습니다. 참고로 헤더 셀에는 <td> 대신 <th> 태그를 사용하면 의미론적으로 더 올바른 마크업이 됩니다.