HTML <table> 태그
정의 및 특징
<table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용합니다.
이러한 테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.
<tr> 요소는 테이블의 각 행(row)을 정의하고, <th> 요소는 각 열의 제목을 정의합니다. 또한, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.
또한, 다음과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.
- <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>
예전에는 종종 HTML 테이블을 사용하여 HTML 문서의 레이아웃을 정의하기도 했지만, 이제는 <div> 요소나 의미 요소들을 사용한 후 CSS를 이용하여 페이지의 레이아웃을 정의하고 있습니다.
예제
<table>
<tr>
<th>밥류</th>
<th>면류</th>
<th>분식류</th>
</tr>
<tr>
<td>김밥</td>
<td>라면</td>
<td>떡볶이</td>
</tr>
</table>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <table> | 1.0 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 <table> 태그의 align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width 속성을 더 이상 지원하지 않습니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
align |
left center right |
주변 텍스트에 따른 테이블의 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
|
bgcolor |
|
rgb(x,x,x) #xxxxxx 색상명 |
테이블의 배경색을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
border |
|
1 0 |
테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
cellpadding |
|
픽셀 |
셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
cellspacing |
|
픽셀 |
셀(cell)과 셀 사이의 공간을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
frame |
|
void above below hsides lhs rhs vsides box border |
테이블에서 보이는 바깥쪽 테두리 부분을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
rules |
|
none groups rows cols all |
테이블에서 보이는 안쪽 테두리 부분을 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
summary |
|
텍스트 |
테이블 콘텐츠의 개요를 명시함. HTML5에서는 더 이상 지원하지 않음. |
|
width |
|
픽셀 % |
테이블의 너비를 명시함. HTML5에서는 더 이상 지원하지 않음. |
CSS 기본값
|
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } |
DOM 인터페이스
|
interface HTMLTableElement : HTMLElement { attribute HTMLTableCaptionElement? caption; HTMLTableCaptionElement createCaption(); void deleteCaption(); attribute HTMLTableSectionElement? tHead; HTMLTableSectionElement createTHead(); void deleteTHead(); attribute HTMLTableSectionElement? tFoot; HTMLTableSectionElement createTFoot(); void deleteTFoot(); [SameObject] readonly attribute HTMLCollection tBodies; HTMLTableSectionElement createTBody(); [SameObject] readonly attribute HTMLCollection rows; HTMLTableRowElement insertRow(optional long index = -1); void deleteRow(long index); }; |
