td element - by. UXKM

2024-07-30

td element 설명

<td> 태그는 HTML 테이블에서 하나의 데이터 셀(data cell)을 정의할 때 사용합니다.
HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.
<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

colspan 속성과 rowspan 속성을 사용하면 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있습니다.

HTML5에서는 <td> 요소의 abbr, align, axis, bgcolor, char, charoff, height, nowrap, scope, valign, width 속성을 더 이상 지원하지 않습니다.

CSS 기본값 :

								td {
									display: table-cell;
									vertical-align: inherit;
								}

8.10.1. td 속성

[colspan] <td colspan="숫자">

해당 요소의 colspan 속성은 해당 헤더 셀이 확장될 열(column)의 개수를 명시합니다. 기본값은 1입니다.
이때 colspan 속성값을 0으로 명시하면, 해당 셀은 자신이 포함된 열 그룹(colgroup)의 마지막 열까지 확장됩니다.

[rowspan] <td rowspan="숫자">

해당 요소의 rowspan 속성은 해당 헤더 셀(cell)이 확장될 행(row)의 개수를 명시합니다. 기본값은 1입니다.
rowspan 속성값을 0으로 명시하면, 해당 셀은 자신이 포함된 테이블 영역(thead, tbody, tfoot)의 마지막 행까지 확장됩니다.

[headers] <td headers="header id">

해당 요소의 headers 속성은 해당 헤더 셀과 연관된 하나 이상의 헤더 셀(header cell)을 명시합니다.
header id값은 해당 헤더 셀과 연관된 헤더 셀(header cell)들의 id 속성값을 공백으로 구분한 리스트입니다.
일반 웹 브라우저에서는 해당 요소에 headers 속성을 명시해도 시각적으로 어떠한 효과도 보여주지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용됩니다.