th element - by. UXKM

2025-05-16

요약 설명
<th> 요소는 <table> 요소 내에서 표의 제목 셀(header cell)을 나타내는 시맨틱 태그로, 보통 열(column) 또는 행(row)의 내용을 설명하는 데 사용됩니다.
기본적으로 굵은 글씨와 가운데 정렬로 표시되며, <tr> 요소 안에 포함되어 다른 셀(<td>)들과 함께 한 행을 구성합니다. scope 속성을 사용하면 제목 셀이 행 전체 또는 열 전체에 적용되는지 명확히 지정할 수 있어, 스크린 리더 등 접근성 기술에서도 정확한 정보 전달이 가능합니다.
표의 구조와 의미를 명확히 표현하는 데 필수적인 역할을 합니다.

주요 역할 및 특징

머리글 셀(헤더 셀) 정의
- <th> 요소는 열(Column)이나 행(Row)의 제목을 정의할 때 사용됩니다.
- 기본적으로 글자가 굵고 중앙 정렬되며, 데이터 셀(<td>)과 함께 사용됩니다.
접근성 향상 (scope 속성 사용)
- 스크린 리더가 머리글 셀과 데이터를 연관지어 읽어주기 때문에 시각 장애인을 위한 접근성이 높아집니다.
- scope 속성을 통해 해당 셀의 역할(열 제목, 행 제목, 그룹 제목)을 명확히 할 수 있습니다.
데이터의 이해도 향상
표를 볼 때 데이터가 어떤 카테고리에 속하는지 쉽게 파악할 수 있습니다.
CSS를 통해 스타일링 가능
background-color, text-align, font-weight 등을 사용해 다양하게 스타일링할 수 있습니다.
반드시 <table> 내부에서 사용해야 함
<th> 요소는 <table>의 <tr> 내부에서 사용되며, 단독으로 사용할 수 없습니다.

CSS 기본 값

<th> 요소는 아래와 같은 기본값이 적용됩니다.

							th {
								display: table-cell;
								vertical-align: inherit;
								font-weight: bold;
								text-align: center;
							}

기본 문법

							<table>
								<tr>
									<th>이름</th> <!-- 머리글 셀(헤더 셀) 정의 -->
									<th>나이</th> <!-- 머리글 셀(헤더 셀) 정의 -->
									<th>직업</th> <!-- 머리글 셀(헤더 셀) 정의 -->
								</tr>
								<tr>
									<td>김철수</td>
									<td>30</td>
									<td>개발자</td>
								</tr>
							</table>

속성

`<th>` 속성 요약

속성명
설명

scope

헤더의 적용 범위를 지정
colspan

가로로 병합할 셀의 개수를 지정
rowspan

세로로 병합할 셀의 개수를 지정
headers

참조할 다른 <th> 요소의 ID를 지정
abbr

헤더 셀의 약어를 지정

[scope] 선택 사항 <th scope="값">

테이블의 헤더(<th>)가 어느 영역(열 제목, 행 제목, 그룹 제목)에 해당하는지 지정하는 속성입니다. 스크린 리더 등의 보조 기술에서 테이블을 읽을 때 유용합니다.

설정 가능한 값 :: col : 현재 열(Column)에 대한 헤더; row : 현재 행(Row)에 대한 헤더; colgroup : 여러 열(Column group)에 대한 헤더; rowgroup : 여러 행(Row group)에 대한 헤더

								<table>
									<thead>
										<tr>
											<th scope="col">이름</th>
											<th scope="col">나이</th>
											<th scope="col">직업</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">홍길동</th>
											<td>30</td>
											<td>개발자</td>
										</tr>
									</tbody>
								</table>

[colspan] 선택 사항 <th colspan="값">

가로로 병합할 셀의 개수를 지정합니다.

								<table>
									<tr>
										<th colspan="2">이름 및 나이</th>
										<th>직업</th>
									</tr>
									<tr>
										<td>홍길동</td>
										<td>30</td>
										<td>개발자</td>
									</tr>
								</table>

[rowspan] 선택 사항 <th rowspan="값">

세로로 병합할 셀의 개수를 지정합니다.

								<table>
									<tr>
										<th rowspan="2">이름</th>
										<td>홍길동</td>
									</tr>
									<tr>
										<td>이순신</td>
									</tr>
								</table>

[headers] 선택 사항 <th headers="값">

현재 셀이 연결된 헤더(id가 있는 <th> 요소)를 명시적으로 지정하는 역할을 합니다.

형식 :: 공백으로 구분된 id 리스트

								<table>
									<thead>
										<tr>
											<th id="room">객실 유형</th>
											<th id="weekday">평일 요금</th>
											<th id="weekend">주말 요금</th>
											<th id="status">예약 가능 여부</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th id="standard" headers="room" scope="row">스탠다드룸</th>
											<td headers="room weekday">₩100,000</td>
											<td headers="room weekend">₩120,000</td>
											<td headers="room status">가능</td>
										</tr>
									</tbody>
								</table>

[abbr] 선택 사항 <th abbr="값">

표의 제목 셀에 대한 약어나 축약된 정보를 제공합니다. 화면 낭독기(screen reader)와 같은 접근성 도구에서 활용되어 보다 간결한 정보를 제공할 수 있습니다.

								<table>
									<tr>
										<th abbr="나이">Age</th>
										<th>직업</th>
									</tr>
									<tr>
										<td>30</td>
										<td>개발자</td>
									</tr>
								</table>

예제

펜션 객실 예약 테이블(scope, headers 사용)

학생 성적표(scope, colspan, rowspan 사용)

주의사항

<th>는 <tr> 내부에서만 사용 가능합니다. <table> 요소 바깥에서 <th>를 단독으로 사용할 수 없습니다.
스크린 리더가 머리글의 역할을 정확히 인식할 수 있도록 scope를 사용하는 것이 좋습니다.
<th> 요소는 <td>와 기본 스타일이 다릅니다. 기본적으로 굵은 글씨와 중앙 정렬이 적용되며, 스타일을 변경하려면 CSS를 사용해야 합니다.