HTML에서 테이블 셀을 표시하려면 <td> 태그를 사용합니다. HTML의 <td> 태그는 테이블(table) 안에 하나의 셀, 즉 테이블 데이터(table data)를 정의할 때 사용됩니다.
<td> 태그는 다음과 같은 속성들을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| abbr | abbreviated_text | 지원 중단(Deprecated) − 셀 내용의 축약된 버전을 지정합니다. |
| align | right, left, center, justify, char | 지원 중단(Deprecated) − 시각적인 가로 정렬을 지정합니다. |
| axis | name | 지원 중단(Deprecated) − 해당 td의 카테고리를 지정합니다. 테이블 데이터에 대한 쿼리를 수행하는 데 사용될 수 있으며, 음성 브라우저 환경에서 유용합니다. |
| bgcolor | rgb(x,x,x), #hexcode, colorname | 지원 중단(Deprecated) − 테이블 셀의 배경색을 지정합니다. |
| char | character | 지원 중단(Deprecated) − 텍스트를 정렬할 기준 문자를 지정합니다. align = "char"일 때 사용됩니다. |
| charoff | 픽셀 또는 % | 지원 중단(Deprecated) − char 속성으로 지정한 첫 번째 문자를 기준으로 정렬 오프셋(픽셀 또는 백분율 값)을 지정합니다. align = "char"일 때 사용됩니다. |
| colspan | 숫자(number) | 현재 셀이 가로로 걸쳐 있는(병합되는) 열(column)의 개수를 지정합니다. |
| headers | id | 해당 셀에 관한 정보를 담고 있는 헤더 셀 목록(공백으로 구분)을 지정합니다. 값은 헤더 셀의 id(id 속성으로 설정)와 일치해야 하며, 비시각적(non-visual) 브라우저에서 유용하게 활용됩니다. |
| height | 픽셀(pixels) | 지원 중단(Deprecated) − 테이블 셀의 높이를 지정합니다. |
| nowrap | nowrap | 지원 중단(Deprecated) − 텍스트가 자동으로 줄바꿈되는 것을 방지합니다. |
| rowspan | 숫자(numbers) | 현재 셀이 세로로 걸쳐 있는(병합되는) 행(row)의 개수를 지정합니다. |
| scope | col, colgroup, row, rowgroup | 지원 중단(Deprecated) − 헤더 셀에 사용되며, 이 헤더의 정보를 참조할 셀들을 지정합니다. |
| valign | top, middle, bottom, baseline | 지원 중단(Deprecated) − 세로 정렬을 지정합니다. |
| width | 픽셀 또는 % | 지원 중단(Deprecated) − 테이블 셀의 너비를 지정합니다. |
예제
다음 코드를 실행하면 HTML에서 테이블 셀을 화면에 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>결과</h3>
<table>
<th>점수</th>
<th>학생</th>
<tr>
<td>600</td>
<td>Amit</td>
</tr>
<tr>
<td>400</td>
<td>Anil</td>
</tr>
</table>
</body>
</html>