HTML에서 테이블 헤더(제목 셀)를 만들려면 <th>...</th> 태그를 사용합니다. 테이블 헤더 태그는 반드시 테이블 행을 나타내는 <tr>...</tr> 태그 안에 위치해야 하고, 이 <tr> 태그는 다시 전체 테이블을 감싸는 <table> 태그 내부에 작성됩니다.
테이블의 기본 구조
테이블은 행(row)과 열(column)로 구성되며, 하나 이상의 <tr>, <th>, <td> 요소를 조합하여 만들 수 있습니다. 각 태그의 역할은 다음과 같습니다.
- <table>: 테이블 전체를 정의하는 최상위 태그
- <tr>: 테이블의 한 행(row)을 정의
- <th>: 헤더 셀(제목 셀)을 정의하며, 기본적으로 굵은 글씨와 가운데 정렬이 적용됨
- <td>: 일반 데이터 셀을 정의
테이블에 테두리를 추가하고 싶다면 style 속성이나 CSS를 활용하면 됩니다. 한 가지 유의할 점은 헤더 행은 보통 테이블당 하나만 두는 것이 일반적이라는 것입니다.
예제 코드
아래 코드를 직접 실행해 HTML 테이블 헤더가 어떻게 표시되는지 확인해 보세요. 이 예제에서는 <style> 태그를 사용해 테이블, 헤더 셀, 데이터 셀에 검은색 1px 테두리를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Database</h1>
<table>
<tr>
<th>Database</th>
<th>Release Year</th>
</tr>
<tr>
<td>MySQL</td>
<td>1995</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 브라우저에서 열면 'Database'와 'Release Year'라는 두 개의 헤더 셀이 있는 테이블이 표시되고, 그 아래에 MySQL 데이터가 정상적으로 출력됩니다. 헤더 셀(<th>)은 일반 셀(<td>)과 달리 굵은 글씨로 강조되어 나타나는 것을 확인할 수 있습니다.
추가 팁
웹 접근성을 높이려면 헤더 셀에 scope="col" 또는 scope="row" 속성을 추가하는 것이 좋습니다. 이를 통해 스크린 리더 사용자에게 해당 셀이 어떤 열 또는 행의 제목인지 명확하게 전달할 수 있습니다.