HTML <tr> 태그 – 올바른 이해와 사용 방법

`<tr>` 태그의 정의 및 사용법

<tr> 태그는
테이블 셀의 행(가로 방향, table row)을 나타냅니다.

이 태그는 내부에 테이블의 <td>(데이터 셀) 또는 <th>(헤더 셀) 태그들로 구성된 셀을 한 줄의 가로 방향으로 배치하는 데 사용됩니다.

예제

이제 실제 예제로 간단한 테이블을 만들어 보겠습니다.
다음의 예제에는 세 개의 <tr> 태그로 세 개의 테이블 셀의 행을 만들었습니다. 각각의 <tr> 태그의 내부에는 <td> 또는 <th> 태그들로 구성된 셀을 한 줄의 가로 방향으로 배치합니다.

HTML

<table>
    <caption>분식점 메뉴</caption>
    <tr> <!-- 테이블 셀의 행(table row) -->
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr> <!-- 테이블 셀의 행(table row) -->
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr> <!-- 테이블 셀의 행(table row) -->
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

실제 적용된 모습 CSS를 사용해서 테이블의 구성 요소의 주변에 선을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.

분식점 메뉴
메뉴	가격
라면	5,000
김밥	4,000

CSS

table {
    border: 2px solid black; /* 요소의 경계에 2px의 검은색 테두리 지정 */
}
th, td {
    border: 1px solid gray; /* 요소의 경계에 1px의 회색 테두리 지정 */
    padding: 0.5em 1.5em; /* 요소의 안쪽 여백 간격(위아래 0.5em, 좌우 1.5em) 지정 */
}
th {
    background-color: #e6e6e6; /* 옅은 회색의 배경색 지정 */
}

구현 설명

<tr> 태그 내부의 셀(<td> 또는 <th> 태그)은 서로 아래에 배치되지 않고 같은 행에서 서로 가로 방향으로 정렬됩니다.
<tr> 태그 다음에 후속으로 다른 <tr> 태그를 작성하면 새로운 테이블 행이 만들어집니다.
테이블에 세 개의 행을 원한다면 세 개의 <tr> 태그를 만들고, 각각의 행 내부에는 원하는 셀(<td> 또는 <th> 태그)로 구성합니다.

다음은 <tr> 태그 내부에서 테이블의 셀을 나타내는 관련 태그들입니다.

테이블의 셀을 나타내는 관련 태그들
`<th>`	테이블의 헤더 셀(header cell), 즉 데이터 셀의 제목 셀을 나타냅니다.
`<td>`	테이블의 데이터 셀(data cell), 즉 데이터 셀을 나타냅니다.

다음은 <tr> 태그 내부에서 테이블의 셀을 사용한 코드 예제입니다.
<tr> 태그 내부에는 <td>로만 구성될 수도 있고, <th>로만 구성될 수도 있으며, 두 개의 태그가 섞여서 구성될 수도 있습니다.

HTML

<!-- td로만 구성된 tr -->
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>

<!-- th로만 구성된 tr -->
<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>

<!-- td와 td로 구성된 tr -->
<tr>
    <th>1</th>
    <td>2</td>
    <td>3</td>
</tr>

속성

<tr> 태그는 모든 전역 속성을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

align
bgcolor
char
charoff
valign

기술적인 문법 요약

tr 태그의 구문 형식
허용되는 부모 요소	`<thead>`의 자식으로 `<tbody>`의 자식으로 `<tfoot>`의 자식으로 `<table>`의 자식으로 (단, `<caption>`, `<colgroup>`, `<thead>`들 보다는 뒤에 있지만, `<tbody>`가 없는 경우에만)
허용되는 콘텐츠	0개 이상의 `<td>` 또는 `<th>`, (스크립트를 지원하는 `<script>` 및 `<template>`도 허용됩니다.)
암시적인 `role` 속성 값	`row`
허용된 `role` 속성 값	모두(Any)

주의할 점

<tr> 태그를 사용할 때에는 다음의 사용상의 주의할 점이 있습니다.

`<table>`의 직계 자식일 때

<tr> 태그는 <thead>, <tbody>, <tfoot>의 자식으로만 유효합니다.
(단, <caption>, <colgroup>, <thead>들 보다는 뒤에 있지만 <tbody>가 없는 경우에만 <table>의 직계 자식으로 <tr> 태그를 사용할 수 있습니다.)

하지만, <tr> 태그가 <table>의 직계 자식으로 배치되어 있으면,
브라우저는 이 <tr> 태그의 부모로 <tbody> 태그를 마크업에 추가합니다. (브라우저가 자동으로 마크업을 추가하는 것을 '암시적으로 추가'한다라고 말합니다.)

다음은 <tr> 태그가 <table>의 직계 자식으로 배치되어 있는 코드 예제입니다.

이럴 경우 다음의 코드 예제와 같이 브라우저는 이 <tr> 태그의 부모로 <tbody> 태그를 암시적으로 마크업에 추가합니다.

HTML 브라우저가 암시적으로 <tbody> 태그를 추가합니다.

<table>
    <tbody> <!-- 브라우저가 추가한 tbody 태그 -->
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>    
    </tbody>
</table>

table > tr과 같은 CSS 자식 선택자가 예상대로 작동하지 않거나 전혀 작동하지 않을 수 있습니다.