[HTML] <td>

<td>

<td> 태그는 표의 열(셀)을 설정합니다.

<table> 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.

테이블은 제목을 표시하기 위해 <caption>을 사용하고 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td> <th> 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.

---

<td>

<td> 태그는 표의 열(셀)을 설정합니다.

특징	설명
요소	블록 요소(Block Element)
닫는 태그	닫는 태그 사용(<td> ~ </td>)
버전	HTML4
사용성

정의(Definition)

• <td> 태그(Table Data)는 표의 열(셀)을 설정합니다.

table과 관련된 태그(Flex Related Tags)

• <table> 태그는 표를 설정합니다.
• <caption> 태그는 표의 제목을 설정합니다.
• <thead> 태그는 표의 헤더 영역을 그룹화합니다.
• <tbody> 태그는 표의 본문 영역을 그룹화합니다.
• <tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
• <tr> 태그는 표의 행을 설정합니다.
• <td> 태그는 표의 열(셀)을 설정합니다.
• <th> 태그는 행이나 열에 타이틀을 설정합니다.
• <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
• <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.

크로스브라우징(CrossBrowsing)

• HTML5에서는 "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" 속성을 지원하지 않습니다.

속성(Property)

속성	값(예)	설명	버전
abbr	abbr="HTML"	테이블 헤더 셀의 요약 단어를 설정합니다.	-
align	left right center justify char	테이블 헤더 셀의 요소를 오른쪽으로 정렬합니다. 테이블 헤더 셀의 요소를 왼쪽으로 정렬합니다. 테이블 헤더 셀의 요소를 가운데로 정렬합니다. 테이블 헤더 셀의 요소를 양쪽으로 정렬합니다. 테이블 헤더 셀의 문자를 설정합니다
axis	axis="name"	테이블 헤더 셀의 카테고리를 분류할 때 설정합니다.
bgcolor	bgcolor="blue"	테이블 헤더 셀의 백그라운드 색을 설정합니다.
char	char="."	테이블 헤더 셀의 문자를 설정합니다.
charoff	character	테이블 헤더 셀의 문자 수를 설정합니다.
colspan	colspan="2"	테이블 헤더 가로 셀의 합친 갯수를 설정합니다.	-
headers	headers="name"	테이블 헤더의 제목을 설정합니다.	-
height	height="30"	테이블 헤더 셀의 높이를 설정합니다.
nowrap	nowrap	테이블 헤더의 내용이 자동 줄바꿈 되지 않도록 설정합니다.
rowspan	rowspan="2"	테이블 헤더 세로 셀의 합친 갯수를 설정합니다.	-
scope	col colgroup row rowgroup	테이블 헤더 가로 열의 속성을 설정합니다. 테이블 헤더 가로 열의 그룹 속성을 설정합니다. 테이블 헤더 세로 열의 속성을 설정합니다. 테이블 헤더 세로 열의 그룹 속성을 설정합니다.
sorted	reversed number reversed number number reversed	테이블 헤더 컬럼의 정렬을 설정합니다.	-
valign	top middle bottom baseline	테이블 헤더 셀의 수직 정렬을 위로 설정합니다. 테이블 헤더 셀의 수직 정렬을 가운데로 설정합니다. 테이블 헤더 셀의 수직 정렬을 밑으로 설정합니다. 테이블 헤더 셀의 수직 정렬을 기본위치로 설정합니다.
width	width="30"	테이블 헤더의 가로 값을 설정합니다.

예제1(Sample)

표를 설정한 예제입니다.

표 제목 설정

표 제목1	표 제목2	표 제목3	표 제목4	표 제목5
표 내용1	표 내용1	표 내용1	표 내용1	표 내용1
표 내용2	표 내용2	표 내용2	표 내용2	표 내용2
표 내용3	표 내용3	표 내용3	표 내용3	표 내용3
표 내용4	표 내용4	표 내용4	표 내용4	표 내용4
표 내용5	표 내용5	표 내용5	표 내용5	표 내용5

HTML

CSS

SCRIPT

<table class="sample-table">
    <caption>표 제목 설정</caption>
    <colgroup>
        <col>
        <col class="blue">
        <col class="red" span="2">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>표 제목1</th>
            <th>표 제목2</th>
            <th>표 제목3</th>
            <th>표 제목4</th>
            <th>표 제목5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
        </tr>
        <tr>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
        </tr>
        <tr>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
        </tr>
        <tr>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
        </tr>
        <tr>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
        </tr>
    </tbody>
</table>

table th, 
table td {
    border: 1px solid #ccc;
    padding: 10px;
}
table .blue {background: #deeeff;}
table .red {background: #ffdddd;}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<td>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
abbr	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
align	사용가능	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
axis	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
bgcolor	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
char	사용가능	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
charoff	사용가능	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
colspan	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
headers	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
height	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
nowrap	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
rowspan	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
scope	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
sorted	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
valign	사용가능	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
width	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---