HTML 테이블에는 수평 헤더와 수직 헤더를 모두 적용할 수 있습니다. 수평 헤더를 만들려면 모든 <th> 태그를 하나의 <tr> 태그, 즉 테이블의 가장 위쪽 행 안에 함께 배치해야 합니다. 이렇게 하면 각 열의 제목이 테이블 상단에 가로로 나열되어 데이터를 한눈에 파악하기 쉬워집니다.
예제
아래 코드를 직접 실행해 보면 테이블에 수평 헤더가 어떻게 설정되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 'Name', 'Age', 'Technology'라는 세 개의 제목 셀이 테이블 최상단 행에 가로로 배치된 것을 확인할 수 있습니다. 이처럼 <th> 태그는 기본적으로 굵은 글씨와 중앙 정렬이 적용되어 일반 데이터 셀(<td>)과 시각적으로 구분됩니다.
