..

Search

<table>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<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);

};


연관 페이지

HTML 테이블 수업 ⇒

CSS 테이블 수업 ⇒


연습문제