HTML 태그 - 코딩의 시작, TCP School

Home » What Is Td In Html » HTML 태그 - 코딩의 시작, TCP School

Maybe your like

HTML <td> 태그

정의 및 특징

<td> 태그는 HTML 테이블에서 하나의 데이터 셀(data cell)을 정의할 때 사용합니다.

HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.

<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

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

예제
<table> <tr> <th>밥류</th> <th>면류</th> <th>분식류</th> </tr> <tr> <td>김밥</td> <td>라면</td> <td>떡볶이</td> </tr> </table>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera
<td> 1.0 지원함 지원함 1.0 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 다음과 같은 <td> 태그의 모든 레이아웃 관련 속성을 더 이상 지원하지 않습니다.

- abbr, align, axis, bgcolor, char, charoff, height, nowrap, scope, valign, width

사용할 수 있는 속성

속성명 속성값 설명
abbr 텍스트

데이터 셀 내부의 콘텐츠에 대한 짧은 설명을 명시함.

HTML5에서는 더 이상 지원하지 않음.

align

left

center

right

justify

char

데이터 셀 내부의 콘텐츠에 대한 정렬 방법을 명시함.

HTML5에서는 더 이상 지원하지 않음.
axis

카테고리명

데이터 셀이 포함될 카테고리를 명시함.

HTML5에서는 더 이상 지원하지 않음.

bgcolor

rgb(x,x,x)

#xxxxxx

색상명

데이터 셀의 배경색을 명시함.

HTML5에서는 더 이상 지원하지 않음.
char 문자

데이터 셀 내부의 콘텐츠를 정렬할 때 기준이 되는 문자를 명시함.

HTML5에서는 더 이상 지원하지 않음.

charoff

숫자

데이터 셀 내부의 콘텐츠 중에서 char 속성에 명시된 문자를 기준으로 정렬될 문자수를 명시함.

HTML5에서는 더 이상 지원하지 않음.

colspan

 숫자

해당 데이터 셀(cell)이 확장될 열(column)의 개수를 명시함.

headers

 header id

해당 데이터 셀과 연관된 하나 이상의 헤더 셀(header cell)을 명시함.
height

픽셀

%

데이터 셀의 높이를 명시함.

HTML5에서는 더 이상 지원하지 않음.

nowrap

nowrap

데이터 셀 내부의 콘텐츠가 자동으로 다음 행으로 넘어가지 않음을 명시함.

HTML5에서는 더 이상 지원하지 않음.

rowspan

 숫자

해당 데이터 셀(cell)이 확장될 행(row)의 개수를 명시함.
scope

col

colgroup

row

rowgroup

테이블에서 헤더 셀과 데이터 셀을 연결하는 방법을 명시함.

HTML5에서는 더 이상 지원하지 않음.

valign

top

middle

bottom

baseline

데이터 셀 내부의 콘텐츠에 대한 수직 방향의 정렬 방법을 명시함.

HTML5에서는 더 이상 지원하지 않음.

width

픽셀

%

데이터 셀의 너비를 명시함.

HTML5에서는 더 이상 지원하지 않음.

CSS 기본값

td {

display: table-cell;

vertical-align: inherit;

}

DOM 인터페이스

interface HTMLTableDataCellElement : HTMLTableCellElement {};

연관 페이지

HTML 테이블 수업 ⇒

CSS 테이블 수업 ⇒

연습문제

  • 연습문제1
  • 연습문제2
  • 연습문제3
  • 연습문제4
  • 연습문제5

Tag » What Is Td In Html