HTML <td> 태그

정의와 사용법

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

HTML 테이블은 두 가지 셀이 있습니다:

  • 제목 셀 - 제목 정보를 포함(사용 <th> 요소 생성)
  • 데이터 셀 - 데이터를 포함(사용 <td> 요소 생성)

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

<th> 요소의 텍스트는 기본적으로 두껍고 가운데 정렬됩니다.

추가로 참조:

HTML 강의:HTML 테이블

HTML DOM 참조 설명서:TableData 객체

CSS 강의:테이블 스타일 설정

예제

예제 1

두 행과 네 개의 테이블 셀을 가진 간단한 HTML 테이블:

<table>
  <tr>
    <td>셀 A</td>
    <td>셀 B</td>
  </tr>
  <tr>
    <td>셀 C</td>
    <td>셀 D</td>
  </tr>
</table>

직접 시도해 보세요

예제 2

정렬 방법 <td> 의 내용을 설정하는 방법( CSS를 사용하여):

<table style="width:100%">
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

직접 시도해 보세요

예제 3

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

<table>
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">1월</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

직접 시도해 보세요

예제 4

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

<table>
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td style="height:100px">1월</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

직접 시도해 보세요

예제 5

테이블 셀에서 다시 행할 것을 정의하는 방법( CSS를 사용하여):

<table>
  <tr>
    <th>詩</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

직접 시도해 보세요

예제 6

가로 정렬하는 방법 <td> 의 내용을 설정하는 방법( CSS를 사용하여):

<table style="width:50%;">
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">1월</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

직접 시도해 보세요

예제 7

테이블 셀의 너비를 설정하는 방법(CSS를 사용하여):

<table style="width:100%">
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td style="width:70%">1월</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

직접 시도해 보세요

예제 8

테이블 제목을 어떻게 만드는가요:

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
    <th>전화</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

직접 시도해 보세요

예제 9

제목이 있는 테이블을 어떻게 만드는가요:

<table>
  <caption>월별 저축</caption>
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
</table>

직접 시도해 보세요

예제 10

다중 행 또는 열을 가진 테이블 셀을 정의하는 방법은 무엇인가요:

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
    <th colspan="2">전화</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

직접 시도해 보세요

속성

속성 값 설명
colspan 숫자 셀이 얼마나 많은 열을 건너뛰어야 할지 설정합니다
headers header_id 셀과 관련된 하나 이상의 타이틀 셀을 지정합니다
rowspan 숫자 셀이 얼마나 많은 행을 건너뛰어야 할지 설정합니다

전역 속성

<td> 태그는 또한 HTML에서의 전역 속성。

이벤트 속성을 지원합니다

<td> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

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

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

브라우저 지원

크롬 에지 파이어폭스 사파리 오퍼라
크롬 에지 파이어폭스 사파리 오퍼라
지원 지원 지원 지원 지원