HTML <td> 태그

❮ 이전 완전한 HTML 참조 다음 ❯

예시

2개의 행과 4개의 테이블 셀이 있는 간단한 HTML 테이블:

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

<td>태그는 HTML 테이블의 표준 데이터 셀을 정의합니다 .

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

헤더 셀 - 헤더 정보를 포함합니다( <th> 요소로 생성됨) .
데이터 셀 - 데이터 포함( <td>요소로 생성됨)

요소 의 텍스트는 <td>기본적으로 일반 및 왼쪽 정렬입니다.

<th> 요소의 텍스트는 기본적으로 굵게 표시되며 가운데에 표시됩니다.

브라우저 지원

Element
<td>	Yes	Yes	Yes	Yes	Yes

속성

Attribute	Value	Description
colspan	number	Specifies the number of columns a cell should span
headers	header_id	Specifies one or more header cells a cell is related to
rowspan	number	Sets the number of rows a cell should span

전역 속성

<td>태그는 HTML의 전역 속성도 지원 합니다 .

이벤트 속성

<td>태그는 HTML의 이벤트 속성 도 지원합니다 .

더 많은 예

예시

<td> 내부의 콘텐츠를 정렬하는 방법(CSS 사용):

<table style="width:100%">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td style="text-align:right">$100</td>
</tr>
<tr>
    <td>February</td>
    <td style="text-align:right">$80</td>
</tr>
</table>

예시

테이블 셀에 배경색을 추가하는 방법(CSS 사용):

<table>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="background-color:#FF0000">January</td>
    <td style="background-color:#00FF00">$100</td>
</tr>
</table>

예시

표 셀의 높이를 설정하는 방법(CSS 사용):

<table>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="height:100px">January</td>
    <td style="height:100px">$100</td>
</tr>
</table>

예시

표 셀에 줄 바꿈을 지정하지 않는 방법(CSS 사용):

<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>

예시

<td> 내부 콘텐츠를 세로로 정렬하는 방법(CSS 사용):

<table style="width:50%;">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr style="height:100px">
    <td style="vertical-align:bottom">January</td>
    <td style="vertical-align:bottom">$100</td>
</tr>
</table>

예시

표 셀의 너비를 설정하는 방법(CSS 사용):

<table style="width:100%">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="width:70%">January</td>
    <td style="width:30%">$100</td>
</tr>
</table>

예시

테이블 헤더를 만드는 방법:

<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
</tr>
<tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
</tr>
</table>

예시

캡션이 있는 테이블을 만드는 방법:

<table>
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$80</td>
</tr>
</table>

예시

둘 이상의 행 또는 열에 걸쳐 있는 테이블 셀을 정의하는 방법:

<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
</tr>
<tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
</tr>
</table>

기본 CSS 설정

대부분의 브라우저는 <td>다음 기본값으로 요소를 표시합니다.

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