html/css 독학하기

코스 전체목록

닫기

table

설명

The HTML Table Element (<table>) represents data in two dimensions or more.

Table 엘리먼트는 데이터를 이차원이나 다차원 테이블로 표시할때 사용되어진다.

참고 : before the creation of CSS, HTML <table> were often used as a canvas for the styling of the page. This usage has been discouraged since HTML4 and the <table> element must not be used for styling purpose.

참고 : CSS가 만들어기 전에는 <table>을 이용해서 페이지의 레이아웃을 디자인 하는 경우가 종종 있었다. 하지만 이러한 사용방법은 권장되지 않으며 HTML4부터는 페이지 레이아웃 디자인 목적으로 <table>을 사용해서는 안된다.

Usage Context

Permitted content In this order: •an optional <caption> element,
 •zero or more <colgroup> elements,
 •an optional <thead> element,
 •one of the two alternatives:
 ◦one <tfoot> element, followed by: ◦zero or more <tbody> elements,
 ◦or one or more <tr> elements,
 ◦a second alternative followed by an optional <tfoot> element: ◦either zero or more <tbody> elements,
 ◦or one or more <tr> elements
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts flow content
Normative document HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

속성

이 엘리먼트는 전역속성을 지원한다.

align - Deprecated

This enumerated attribute indicates how the table must be aligned in regard of the containing document. It may have the following values:

  •left, meaning that the table is to be displayed to the left of the document;
  •center, meaning that the table is to be displayed centered in the document;
  •right, meaning that the table is to be displayed to the right of the document.

align - 사용중지

이 속성은 도큐먼트내에서 테이블의 수평적인 정렬을 지정한다. 이 속성에 사용가능한 값은 아래와 같다.

  • left, 테이블을 도큐멘트내에서 왼쪽에 배치한다.
  • center, 테이블을 도큐먼트내에서 중앙에 배치한다.
  • right, 테이블을 도큐먼트내에서 오른쪽에 배치한다.

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the align attribute, the CSS properties text-align and vertical-align should be used.

노트 : 이 속성은 HTML5에서 사용중지되었기때문에 사용이 권장되지 않는다(원문에서는 사용하지 말라고 말하고 있으나 현대의 브라우저들은 모두 해석이 가능하다. 다만 이 속성을 사용했을 경우에 HTML5의 유효성 체크를 패스하지는 못한다.). 비슷한 효과를 주기위해서 <table>의 align 속성보다는 CSS의 text-align과 vertical-align의 사용을 권장한다.

 bgcolor - Deprecated

This attribute defines the background color of the table and its content. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'.

bgcolor - 사용중지

이 속성은 테이블과 테이블의 내용에 대한 배경색깔을 정의한다. 사용가능한 값의 형식은 "#"이 앞에 추가된 sRGB의 정의에  따른 6자리 16진수 코드이다.

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the bgcolor attribute, the CSS property background-color should be used.

노트 :  이 속성은 HTML5에서 사용중지되었기때문에 사용이 권장되지 않는다. 비슷한 효과를 주기위해서 CSS의 background-color 속성의 사용을 권장한다.

 border - Deprecated
This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, it implies that the frame attribute is set to void.

borader - 사용중지

이 속성은 테이블주위의 테두리의 두께를 픽셀단위로 정의한다. 만약 속성값을 0으로 지정한다면 이것은 속성값을 void로 설정하는 것을 의미한다..

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the border attribute, the CSS properties border, border-color, border-width and border-style should be used.

노트 : 이 속성은 HTML5에서 사용중지되었기때문에 사용이 권장되어지지 않는다. 비슷한 효과를 주기위해서 CSS의 border, border-color, border-width 그리고 border-style의 사용을 권장한다.

 cellpadding - Deprecated

This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all fourth side, if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).

cellpadding - 사용중지

이 속성은 셀테두리의 보여짐 여부에 상관없이 셀과 셀테두리간의 간격을 지정하는데 사용된다. 만약 속성값에 픽셀값을 사용한다면 셀을 둘러싼 네방향 모두에 입력한 픽셀값이 적용이된다. 만약 퍼센티지 값을 사용한다면 셀안의 내용은 가운데 정렬이 되며 수직(셀내용의 위와 아래)으로 들어가는 간격의 총합과 수평(셀내용의 좌우)으로 들어가는 간격의 총합에 퍼센티지 값이 적용된다.

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the border attribute, use the CSS property border-collapse with the value collapse on the  <table> element itself, and the property padding on the <td>.

노트 : 이 속성은 HTML5에서 사용이 중지됨에 따라 사용이 권장되지 않는다. 비슷한 효과를 주기위해서 <table> 엘리먼트에 CSS 속성 border-collapse를 collapse로 지정하고 자식 <td> 엘리먼트에 CSS의 padding 속성의 사용을 권장한다.

 cellspacing - Deprecated

This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.

cellspacing - 사용중지

이 속성은 셀간의 수평과 수직에 적용될 간격을 퍼센티지나 픽셀단위로 지정한다. 지정된 값의 설정 적용범위는 테이블의 윗변과 첫번째 열, 테이블의 왼쪽변과 첫번째 칼럼, 테이블의 오른쪽변과 마지막 칼럼 그리고 테이블의 밑변과 마지막 열 사이의 간격에 적용된다.

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the border attribute, use the CSS property border-collapse with the value collapse on the  <table> element itself, and the property margin on the <td> element.

노트 : 이 속성은 HTML5에서 사용중지됨에 따라 사용이 권장되지 않는다.  비슷한 효과를 주기위해서 <table> 엘리먼트에 CSS 속성 border-collapse를 collapse로 지정하고 자식 <td> 엘리먼트에 CSS 의 margin 속성의 사용을 권장한다.

frame - Deprecated

This enumerated attribute defines which side of the frame surrounding the table must be displayed.

frame - 사용중지

이 속성은 테이블을 둘러싸고 있는 프레임(바깥쪽 border)중에 어느쪽을 보여줄지를 지정한다.

Usage note : Do not use this attribute, as it has been deprecated: the <table> element should be styled using CSS. To give a similar effect than the frame attribute, use the CSS properties border-style and border-width.

노트 :이 속성은 HTML5에서 사용중지됨에 따라 사용이 권장되지 않는다. 비슷한 효과를 주기위해서 CSS의 border-style 속성과 border-width 속성의 사용을 권장한다.

 rules - Deprecated

This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:

 •none, which indicates the no rules will be displayed; it is the default value;
 •groups, which will make the rules to be displayed between row groups (defined by the <thead>, <tbody> and <tfoot> elements) and between column groups (defined by the <col> and <colgroup> elements) only;
 •rows, which will make the rules to be displayed between rows;
 •columns, which will make the rules to be displayed between columns;
 •all, which wil make the rules to be displayed between rows and columns.

rules - 사용중지

이 속성은 안쪽 border의 선중에 어느쪽을 보여줄지를 지정한다. 다음과 같은 값을 가질 수 있다.

  • none, 기본값으로 지정되는 이 값은 어떤 선도 보여주지 않는다.
  • groups, 이 값은 열 그룹(<thead>, <tbody> 또는 <tfoot>으로 정의된 엘리먼트)과 칼럼그룹(<col> 이나 <colgroup>으로 정의된 엘리먼트)에만 적용된다.
  • rows, 이 값은 열 사이의 선만 표시한다.
  • columns, 이 값은 칼럼사이의 선만 표시한다.
  • all, 열과 칼럼사이에 선을 표시한다.

Note :
 •The styling of the rules is browser-dependant and cannot be modified.
 •Do not use this attribute, as it has been deprecated: the rules should be defined and styled using CSS. use the CSS property border on the adequate <thead>, <tbody>, <tfoot>, <col> or <colgroup> elements.

노트:
이 속성의 적용은 브라우저마다 다르게 보일수 있으며 브라우저들의 렌더링방식은 수정이 불가능하다.
이 속성은 HTML5에서 사용이 중지됨에 따라 사용이 권장되지 않는다. rule속성은 반드시 CSS를 이용해서 설정이 되어야 한다. CSS의 border를 <thead>,<tbody>,<tfoot>,<col>,<colgroup>등에 사용하는 것을 권장한다.

 summary - 사용중지

This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the <caption> instead. The summary attribute is not mandatory and may be omitted when a <caption> element fulfills its role.

이 속성은 사용자의 브라우져(user-agent)가 테이블을 표시할수 없을때 대체 텍스트로 사용되는 테이블에 대한 간단한 설명을 지정한다. 일반적으로, 이 속성은 점자 스크린등을 이용해서 웹을 이용하는 시각장애인등을 위한 테이블의 설명등을 적는데 사용한다. 이 속성은 필수 속성은 아니고 <caption> 엘리먼트로도 또한 대체가 가능하다.

Usage Note : Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table:
 •In prose, surrounding the table (this is the less semantic-conveying way of doing it).
 •In the table's <caption> element.
 •In a <details> element, inside the table's <caption> element.
 •Include the <table> element in a <figure> element and add the description in prose next to it.
 •Include the <table> element in a <figure> element and add the description in prose inside a <figcaption> element.
 •Adjust the table so that such description is no more needed, by using <th> and <thead> elements for example.

노트: 이 속성은 HTML5에서 사용이 중지됨에 따라 사용이 권장되지 않는다. 또한 아래의 방법중에 한가지로 대체가 가능하다:
In prose, surrounding the table (this is the less semantic-conveying way of doing it).
테이블의 <caption> 엘리먼트를 사용한다.
테이블 하위의 <caption>엘리먼트에 <details> 엘리먼트를 사용한다.
<figure>엘리먼트에 <table>엘리먼트를 포함시키고 설명을 추가합니다.
<figure>엘리먼트에 <table>엘리먼트를 포함시키고 <figcaption>을 이용해서 설명을 추가합니다.
<th>나 <thead>등을 적절히 이용하여 테이블에 대한 설명이 따로 필요없이 직관적으로 이해될수 있도록 만듭니다.

 width - 사용중지

This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.

이 속성은 테이블의 폭을 지정하는데 사용된다. 이 속성은 픽센단위나 이 테이블을 포함하고 있는 부모엘리먼트의 폭에대한 퍼센티지값으로 설정이 가능하다.

Usage Note : Do not use this attribute, as it has been deprecated: the rules should be defined and styled using CSS. use the CSS property width instead.

노트: 이 속성은 HTML5에서 사용이 중지됨에 따라 사용이 권장되지 않는다. CSS의 width속성의 사용을 권장한다.

예제

<!-- Simple table -->
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- Simple table with header -->
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<!-- Table with thead, tfoot, and tbody -->
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<!-- Table with colgroup -->
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<!-- Table with colgroup and col -->
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<!-- Simple table with caption -->
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

DOM Interface

This element implements the HTMLTableElement interface.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 지원 지원 지원 지원 지원
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원          

참고

댓글

댓글 본문
버전 관리
달리는문군
현재 버전
선택 버전
graphittie 자세히 보기