<table>
Resumo
O elemento HTML Table (<table>
) representa dados em duas dimensões ou mais.
Nota: Antes da criação do CSS, os elementos HTML eram muitas vezes utilizados para alterar o layout da página. Esta prática tem sido desencorajada desde o HTML 4 e o elemento Table não deve ser utilizado para fins de layout.
Contexto de uso
Categoria de conteúdo (en-US) | Fluxo de conteúdo (en-US) |
Conteúdo permitido | Nesta ordem:
|
Omissão de tag | Nenhuma, ambas as tags de início e fim são obrigatórias |
Elementos pais permitidos | Qualquer elemento que aceite fluxo de conteúdo |
Documento normativo | HTML5, section 4.9.1 (HTML4.01, section 11.2.1) |
Atributos
Este elemento inclui os atributos globais (en-US).
align
Deprecated-
Este atributo enumerado indica como a tabela deve ser alinhada considerando o conteúdo do documento. Que pode ter os seguintes valores:
- left, significando que a tabela deve ser exibida à esquerda do documento;
- center, significando que a tabela deve ser exibida centralizada no documento;
- right, significando que a tabela deve ser exibida à direita do documento.
Note:- Não use estes atributos, pois foram depreciados: o elemento
<table>
deve ser estilizado utilizando CSS. Para dar um efeito similar ao atributo align, a propriedade CSS "text-align" e "vertical-align" devem ser usadas.- Antes do Firefox 4, Firefox também suportava, somente em quirks mode,
os valores middle
,absmiddle
, andabscenter
como sinônimos de center
.
bgcolor
Deprecated-
Este atributo define a cor de fundo da tabela e seu conteúdo. É um dos códigos hexadecimais de 6 dígitos como definido em sRGB, prefixado por um '#'. Um dos textos das dezesseis cores predefinidas podem também ser utilizados:
black = "#000000" green = "#008000" silver = "#C0C0C0" lime = "#00FF00" gray = "#808080" olive = "#808000" white = "#FFFFFF" yellow = "#FFFF00" maroon = "#800000" navy = "#000080" red = "#FF0000" blue = "#0000FF" purple = "#800080" teal = "#008080" fuchsia = "#FF00FF" aqua = "#00FFFF" Note: 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 propertybackground-color
should be used. 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.Note: 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 propertiesborder
(en-US),border-color
(en-US),border-width
(en-US) andborder-style
(en-US) should be used. 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 four sides; 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).
Note: 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 propertyborder-collapse
(en-US) with the value collapse on the<table>
element itself, and the propertypadding
on the<td>
(en-US). 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.
Note: 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 propertyborder-collapse
(en-US) with the value collapse on the<table>
element itself, and the propertymargin
on the<td>
(en-US) element. frame
Deprecated-
This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
above below hsides vsides lhs rhs border box void Note: 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 propertiesborder-style
(en-US) andborder-width
(en-US). 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>
(en-US),<tbody>
(en-US) and<tfoot>
elements) and between column groups (defined by the<col>
and<colgroup>
(en-US) 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.
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
(en-US) on the adequate<thead>
(en-US),<tbody>
(en-US),<tfoot>
,<col>
or<colgroup>
(en-US) elements.
summary
Deprecated-
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.Note: 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>
(en-US) elements for example.
- In the table's
width
Deprecated-
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.
Note: 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.
DOM interface
This element implements the HTMLTableElement
(en-US) interface.
Examples
Simple Table
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
More Examples
<p>Simple table with header</p>
<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>
<p>Table with thead, tfoot, and tbody</p>
<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>
<p>Table with colgroup</p>
<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>
<p>Table with colgroup and col</p>
<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>
<p>Simple table with caption</p>
<table>
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>
Compatibilidade com navegadores
BCD tables only load in the browser
See also
- Other table-related HTML Elements:
<caption>
,<col>
,<colgroup>
(en-US),<tbody>
(en-US),<td>
(en-US),<tfoot>
,<th>
,<thead>
(en-US),<tr>
(en-US); - CSS properties that may be specially useful to style the <table> element:
width
to control the width of the table;border
(en-US),border-style
(en-US),border-color
(en-US),border-width
(en-US),border-collapse
(en-US),border-spacing
(en-US) to control the aspect of cell borders, rules and frame;margin
andpadding
to style the individual cell content;text-align
andvertical-align
to define alignment of text and cell content.