tr element - by. UXKM

2025-05-16

요약 설명
<tr> 요소는 <table> 요소 안에서 하나의 행(row)을 정의하는 시맨틱 태그로, <thead>, <tbody>, <tfoot> 등 표의 각 영역 내부에서 사용됩니다.
<tr>은 내부에 <th>(제목 셀) 또는 <td>(일반 셀)을 포함하며, 각 셀들을 가로로 나열하여 하나의 수평 행을 구성합니다. 모든 테이블 데이터는 하나 이상의 <tr> 요소로 묶어, 표의 각 행을 논리적으로 구성하고 정렬할 수 있습니다.
<tr>은 표 구조에서 가장 기본적인 반복 단위로 사용됩니다.

주요 역할 및 특징

테이블의 행(Row) 정의
- <tr> 요소는 <table> 내부에서 테이블의 한 줄을 나타내는 기본적인 요소입니다.
- 한 개 이상의 <td> 또는 <th> 요소를 포함하여 열(Column)들을 구성할 수 있습니다.
반드시 <table> 내부에서 사용해야 함
<tr> 요소는 단독으로 사용할 수 없으며, 반드시 <table>, <thead>, <tbody>, <tfoot> 내부에서 사용해야 합니다.
CSS를 활용하여 스타일 적용 가능
JavaScript와의 호환성
DOM을 통해 동적으로 행을 추가, 삭제할 수 있으며, 자주 사용됩니다.

CSS 기본 값

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

							tr {
								display: table-row;
							}

기본 문법

							<table>
								<tr> <!-- 테이블의 행(Row) 정의 -->
									<th>이름</th>
									<th>나이</th>
									<th>직업</th>
								</tr>
								<tr> <!-- 테이블의 행(Row) 정의 -->
									<td>김철수</td>
									<td>30</td>
									<td>개발자</td>
								</tr>
							</table>

속성

<tr> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<tr> 요소는 단독으로 사용하면 의미가 없습니다. <tr> 요소는 <table> 요소의 내부에서 <th>, <td> 요소의 부모 요소로 사용되어, 테이블의 행(Row)을 정의하는 역할을 합니다.
다음 섹션(th element, td element)에서 <tr> 요소와 함께 사용하는 예제를 확인할 수 있습니다.

th element 비로가기 td element 비로가기

주의사항

<tr>는 반드시 <table> 내에서만 사용 가능합니다.
<tr> 내부에는 반드시 <th> 또는 <td>가 있어야 합니다.
<tr> 요소는 행을 나타내는 역할만 하므로, 셀(<th> 또는 <td>)을 포함하지 않으면 아무것도 표시되지 않습니다.