HTML 표 제목(헤더)이란 무엇인가?
HTML에서 표의 제목 또는 헤더를 만들려면 <th> 태그를 사용합니다. <th>(table header) 태그는 표 내부에서 헤더 셀을 정의하는 전용 태그로, 일반 데이터 셀인 <td>와 달리 기본적으로 굵은 글씨에 가운데 정렬로 표시됩니다.
<th> 태그에는 다양한 속성을 적용할 수 있습니다. 아래 표에서 주요 속성과 그 값을 확인해 보세요.
| 속성 | 값 | 설명 |
|---|---|---|
| abbr | 축약 텍스트 | 사용 중단 — 헤더 셀 내용의 축약 버전을 지정합니다. |
| align | right left center justify char | 사용 중단 — 헤더 셀 내용의 정렬 방식을 지정합니다. |
| axis | 이름 | 사용 중단 — 해당 th 요소의 카테고리를 지정합니다. |
| bgcolor | rgb(x,x,x) #hexcode 색상 이름 | 사용 중단 — 헤더 셀의 배경색을 지정합니다. |
| char | 문자 | 사용 중단 — 텍스트를 정렬할 기준 문자를 지정합니다. align="char"일 때 사용됩니다. |
| charoff | 픽셀 또는 % | 사용 중단 — char 속성으로 지정한 첫 번째 문자를 기준으로 정렬 오프셋(픽셀 또는 백분율)을 지정합니다. align="char"일 때 사용됩니다. |
| colspan | 숫자 | 헤더 셀이 가로로 걸치는 열(column)의 수를 지정합니다. |
| headers | ID | 해당 셀이 연관된 하나 이상의 헤더 셀을 지정합니다. |
| height | 픽셀 | 사용 중단 — 헤더 셀의 높이를 지정합니다. |
| nowrap | nowrap | 사용 중단 — 텍스트가 자동으로 줄바꿈되지 않도록 합니다. |
| rowspan | 숫자 | 헤더 셀이 세로로 걸치는 행(row)의 수를 지정합니다. |
| scope | col colgroup row rowgroup | 헤더 셀에 사용되며, 이 헤더의 정보를 참조할 셀들의 범위를 지정합니다. |
| valign | top middle bottom baseline | 사용 중단 — 수직 정렬 방식을 지정합니다. |
| width | 픽셀 또는 % | 사용 중단 — 헤더 셀의 너비를 지정합니다. |
사용 중단(Deprecated) 속성에 대한 안내
위 표에서 '사용 중단'으로 표시된 속성(abbr, align, axis, bgcolor, char, charoff, height, nowrap, valign, width)은 HTML5에서 공식적으로 지원되지 않습니다. 최신 웹 표준에서는 이러한 표현 관련 속성 대신 CSS를 사용하는 것이 권장됩니다. 반면 colspan, rowspan, headers, scope처럼 표의 구조와 의미를 담당하는 속성은 여전히 유효하므로 적극적으로 활용할 수 있습니다.
예제
다음 코드를 실행하면 HTML에서 표 제목을 만드는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Result</h3>
<table>
<th>Marks</th>
<th>Student</th>
<tr>
<td>600</td>
<td>Amit</td>
</tr>
<tr>
<td>400</td>
<td>Anil</td>
</tr>
</table>
</body>
</html>위 코드를 실행하면 'Marks(점수)'와 'Student(학생)'라는 두 개의 헤더 셀을 가진 표가 출력됩니다. <th> 태그로 작성한 셀은 자동으로 굵게 표시되어 일반 데이터 셀과 시각적으로 구별됩니다.
활용 팁: 시맨틱 마크업으로 접근성 높이기
표의 구조를 더 명확하게 만들려면 헤더 행은 <thead>, 본문 데이터는 <tbody>로 감싸는 것이 좋습니다. 또한 scope 속성(col, row 등)을 함께 사용하면 스크린 리더 사용자에게 각 셀의 의미를 정확하게 전달할 수 있어 웹 접근성이 크게 향상됩니다.