<td> 태그의 정의 및 사용법

<td> 태그는
테이블의 데이터(table data) 셀을 나타냅니다.

HTML 테이블에는 두 가지 종류의 셀이 있습니다.

HTML 테이블의 셀 종류
헤더 셀(table header cell) 헤더 정보를 포함하는 셀입니다. 흔히 '제목 셀'이라고도 불립니다.
(<th> 태그에 해당)
데이터 셀(table data cell) 데이터 정보를 포함하는 셀입니다. 흔히 '내용 셀'이라고도 불립니다.
(<td> 태그에 해당)

마크업 규칙

HTML 테이블의 셀(<td> 및 <th> 태그)은 <tr> 태그의 자식으로만 사용되어야 합니다.

테이블 셀의 행(가로 방향, table row)을 나타내는 <tr> 태그 내에 셀을 마크업하면 구성된 셀을 한 줄의 가로 방향으로 배치하는 행이 만들어집니다.

html tr 태그
<tr> 태그와 내부에 배치된 <td>, <th> 태그들

데모

다음의 데모로 <td> 태그의 사용 방법을 확인해 보세요.

HTML 
<table>
    <caption>분식점 메뉴</caption>
    <tr> <!-- 테이블의 셀(td 및 th 태그) tr의 자식으로 마크업해야 합니다! -->
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

<caption> 태그는 오직 부모 테이블의 설명 또는 제목을 나타내는 캡션입니다.

실제 적용된 모습

구현 설명

  • 마크업한 <td> 태그는 기본적으로 브라우저에서 기본 스타일이 없이 렌더링됩니다.
  • 마크업한 <th> 태그는 기본적으로 브라우저에서 글꼴의 굵기(font-weight)가 굵은 글꼴(bold)로 표시되며, 텍스트의 정렬(text-align)이 가운데(center)로 표시됩니다.
  • <tr> 태그 내부의 셀(<td> 또는 <th> 태그)은 서로 아래에 배치되지 않고 같은 행에서 서로 가로 방향으로 정렬됩니다.
  • <tr> 태그 다음에 후속으로 다른 <tr> 태그를 작성하면 새로운 테이블 행이 만들어집니다.
  • 테이블에 세 개의 행을 원한다면 세 개의 <tr> 태그를 만들고, 각각의 행 내부에는 원하는 셀(<td> 또는 <th> 태그)로 구성합니다.

테이블의 셀을 구분하기 위해서 데모에서 사용된 <th>와 <td> 태그에 CSS로 간단하게 스타일을 설정하겠습니다.

CSS 
td, th {
    padding: 0.5em 1em;
    border: 1px solid gray;
}

CSS의 padding 속성으로 요소 안쪽에 여백 간격을 주고, border 속성으로 요소의 경계에 1px의 회색 테두리 지정했습니다.

실제 적용된 모습

'실제 적용된 모습'을 보면, <td> 태그가 더욱 '데이터 셀'처럼 보이는 것을 볼 수 있습니다.
'메뉴'에 해당하는 셀은 '라면'과 '김밥'이라는 '데이터 셀'의 제목 셀이고, '가격'에 해당하는 셀은 '5,000'과 '4,000'이라는 '데이터 셀'의 제목 셀입니다.

이처럼 <td> 태그는 테이블의 데이터 내용, 즉 '데이터(table data) 셀'을 나타냅니다.

헤더(table header) 셀은
열(column), 행(row), 또는 특정 셀 그룹(group of cells)과 연관된 데이터의 유형을 정의하는 셀입니다. 흔히 '제목 셀'이라고도 불립니다. 이는 <th> 태그가 테이블 데이터(<td>) 셀을 설명하거나 분류하는 제목 역할을 하기 때문입니다.

속성

<td> 태그는 모든 전역 속성을 사용할 수 있습니다.
또한, 다음의 속성들을 사용할 수 있습니다.

colspan

이 속성은 데이터 셀(<td>)이 확장되어 걸쳐 있는 테이블 열(column)의 수를 나타냅니다.
기본값은 1이며, 0보다 크고 1000보다 작거나 같은 정수여야 합니다. (음수 값은 유효하지 않습니다.)

colspan
colspan
예제
HTML 
<table>
    <tr>
        <td colspan="2">Data Cell A</td>
        <td>Data Cell B</td>
    </tr>
    <tr>
        <td>Data Cell A-A</td>
        <td>Data Cell B-B</td>
        <td>Data Cell C-C</td>
    </tr>
</table>
CSS 
td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
실제 적용된 모습

rowspan

이 속성은 데이터 셀(<td>)이 확장되어 걸쳐 있는 테이블 행(row)의 수를 나타냅니다.
기본값은 1이며, 0보다 크고 65534보다 작거나 같은 정수여야 합니다. (음수 값은 유효하지 않습니다.)

rowspan
rowspan
예제
HTML 
<table>
    <tr>
        <td rowspan="2">Data Cell A</td>
        <td>Data Cell B</td>
        <td>Data Cell C</td>
    </tr>
    <tr>
        <td>Data Cell B-B</td>
        <td>Data Cell C-C</td>
    </tr>
</table>
CSS 
td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
실제 적용된 모습

headers

이 속성은 데이터 셀(<td>)이 속한 테이블의 헤더 셀(<th>) 중 어떤 것이 해당 <td>의 제목으로 사용되는지를 지정합니다.

이 속성의 값은 제목으로 사용할 헤더 셀(<th>)의 id 속성 값으로 사용합니다.

  • 하나의 <td>에 한 개의 값으로 하나의 id 속성 값을 지정할 수 있습니다.
  • 하나의 <td>에 여러 개의 값을 사용할 경우에는 순서와 상관없이 띄어쓰기로 구분하여 여러 개의 id 속성 값을 지정합니다.
주로 사용되는 경우

복잡한 테이블 구조에서 데이터 셀과 헤더 셀 간의 관계를 명확하게 하기 위해 사용됩니다.
예를 들어, 여러 개의 헤더 셀이 있는 테이블에서 각 데이터 셀이 어떤 헤더 셀에 해당하는지 명시할 수 있습니다.

headers 속성은 <th> 태그에서도 사용 가능한 속성입니다.

예제
HTML 출처: W3C - Using id and headers attributes to associate data cells with header cells in data tables 
<table>
    <tr>
        <th rowspan="2" id="h">Homework</th>
        <th colspan="3" id="e">Exams</th>
        <th colspan="3" id="p">Projects</th>
    </tr>
    <tr>
        <th id="e1" headers="e">1</th>
        <th id="e2" headers="e">2</th>
        <th id="ef" headers="e">Final</th>
        <th id="p1" headers="p">1</th>
        <th id="p2" headers="p">2</th>
        <th id="pf" headers="p">Final</th>
    </tr>
    <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
    </tr>
</table>

일러두기!
일반적으로 열 헤더(column headers )가 있는 테이블 헤더 그룹(head group)은 열(columns)의 정보를 더 쉽게 이해할 수 있도록 구현됩니다. 이러한 테이블 구조에서 <thead>(테이블 헤더)와 <tbody>(테이블 본문) 태그는 헤더 및 데이터의 이러한 행을 해당 테이블 헤더 및 본문 섹션으로 그룹화하는 데 사용됩니다. 이 예제에서는 headers 속성에 대한 단순 정보 제공 목적으로만 사용된 것으로, 복잡성을 줄이기 위해서 이러한 구조적 태그는 생략했습니다.

CSS 
td, th {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
th {
    background-color: #e6e6e6;
}
실제 적용된 모습

더 이상 사용되지 않는 속성

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

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

  • align
  • bgcolor
  • axis
  • char
  • charoff
  • valign
  • height
  • width

기술적인 문법 요약

td 태그의 구문 형식
허용되는 부모 요소 <tr>
암시적인 role 속성 값
  • 기본적으로 <table>>의 자손으로 사용될 때에는 cell 값을 가집니다.
  • grid의 role 값을 가진 요소의 자손으로 사용될 때에는 gridcell 값을 가집니다.
허용된 role 속성 값 모두(Any)

브라우저 호환성

td 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<td> 1 12 1 1

명세서

td 태그의 명세서 사양
명세서 사양
<td> HTML Standard
#the-td-element

참고문헌

같이 보기