td element - by. UXKM

Publishing
HTML
표 데이터(Tabular data)
td element

요약 설명
<td> 요소는 <table> 내에서 일반적인 데이터 셀(table data cell)을 나타내는 시맨틱 태그로, <tr> 요소 내부에 포함되어 표의 실제 콘텐츠를 구성합니다.
각 <td>는 열(column) 하나에 해당하는 데이터를 담으며, 텍스트, 숫자, 이미지, 링크 등 다양한 콘텐츠를 포함할 수 있습니다. 제목 셀인 <th>와 달리 기본적으로 좌측 정렬과 일반 글씨체로 렌더링되며, 필요에 따라 colspan(가로 셀 병합), rowspan(세로 셀 병합) 속성을 사용해 셀 병합도 가능합니다.
표 구조에서 가장 많이 사용되는 기본 단위입니다.

주요 역할 및 특징

데이터 셀 정의
- <th> 요소와 달리, 일반적인 데이터를 포함하는 셀입니다.
- <tr> 내부에서 여러 개의 <td> 요소가 사용될 수 있습니다.
셀 병합 가능 (colspan, rowspan 속성)
- colspan : 가로로 셀 병합
- rowspan : 세로로 셀 병합
기본적으로 왼쪽 정렬 및 일반 글꼴 스타일을 가짐
- <th>와 달리, 글꼴이 굵어지거나 중앙 정렬되지 않습니다.
- 정렬, 스타일 등의 변경이 필요하면 CSS를 사용해야 합니다.
반드시 <table> 내부에서 사용해야 함
<td> 요소는 <table>의 <tr> 내부에서 사용되며, 단독으로 사용할 수 없습니다.

CSS 기본 값

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

							td {
								display: table-cell;
								font-weight: normal;
								text-align: left;
								vertical-align: middle;
							}

기본 문법

							<table>
								<tr>
									<th>이름</th>
									<th>나이</th>
									<th>직업</th>
								</tr>
								<tr>
									<td>김철수</td>  <!-- 데이터 셀 정의 -->
									<td>30</td>    <!-- 데이터 셀 정의 -->
									<td>개발자</td>  <!-- 데이터 셀 정의 -->
								</tr>
							</table>

속성

`<td>` 속성 요약

속성명
설명

colspan

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

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

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

셀의 약어를 지정

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

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

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

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

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

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

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

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

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

								<table>
									<tr>
										<th id="room">객실 유형</th>
										<th id="weekday">평일 요금</th>
										<th id="weekend">주말 요금</th>
										<th id="status">예약 가능 여부</th>
									</tr>
									<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>
								</table>

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

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

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

예제

각 예제는 id, headers, colspan, rowspan, abbr을 활용하여 접근성과 구조를 강화한 예제입니다.

대학 성적표

병원 진료 일정표

국토교통부 실거래가

주의사항

<td> 요소는 반드시 <tr> 내부에서 사용해야 합니다. <td>를 단독으로 사용하거나 <table> 바로 아래 배치하면 올바른 HTML 구조가 아닙니다.
스크린 리더가 머리글과 데이터를 연관 지어 읽을 수 있도록 headers를 사용하는 것이 좋습니다.
작은 화면에서는 스크롤 또는 숨김 처리가 필요합니다. overflow-x: auto;를 사용해 수평 스크롤을 권장합니다.