The HTML <table>
element represents tabular data —that is, information expressed via a two-dimensional data table.
Content categories | Flow content |
---|---|
Permitted content | |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content |
Permitted ARIA roles | Any |
DOM interface | HTMLTableElement |
This element includes the global attributes. The following attributes listed on this page are now deprecated.
align
deprecated<table>
element should be styled using CSS. Set margin-left
and margin-right
to auto
or margin
to 0 auto
to achieve an effect that is similar to the align attribute.middle
, absmiddle
, and abscenter
values as synonyms of center
, in quirks mode only.bgcolor
deprecatedblack = "#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" |
<table>
element should be styled using CSS. Use the background-color
property in CSS to create an effect that is similar to the bgcolor
attribute.border
deprecatedframe
attribute is set to void. <table>
element should be styled using CSS. To create an effect similar to the border attribute, the border
, border-color
, border-width
and border-style
CSS properties should be used.cellpadding
deprecated<table>
element should be styled using CSS. To create an effect similar to the cellpadding attribute, apply the border-collapse
property to the <table>
element, with its value set to collapse, and the padding
property to the <td>
element.cellspacing
deprecated<table>
element should be styled using CSS. To create an effect similar to the cellspacing attribute, apply the border-spacing
property to the <table>
element. Border-spacing does not have any effect if border-collapse
is set to collapse.frame
deprecatedabove | below | ||
hsides | vsides | ||
lhs | rhs | ||
border | box | ||
void |
<table>
element should be styled using CSS. To create an effect similar to the frame attribute, use the border-style
and border-width
properties.rules
deprecated<thead>
, <tbody>
and <tfoot>
elements) and between column groups (defined by the <col>
and <colgroup>
elements) only;summary
deprecated<caption>
instead. The summary attribute is not mandatory and may be omitted when a <caption>
element fulfills its role. <caption>
element.<details>
element, inside the table's <caption>
element.<table>
element in a <figure>
element and add the description in prose next to it.<table>
element in a <figure>
element and add the description in prose inside a <figcaption>
element.<th>
and <thead>
elements).width
deprecated<table> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table>
<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"></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 style="background-color: #0f0"> <col 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>
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'table element' in that specification. | Living Standard | |
HTML5 The definition of 'table element' in that specification. | Recommendation |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0[1] | 7.0 | 1.0 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0[1] | 6.0 | 1.0 |
[1] There is an Internet Explorer 9 rendering bug involving <table>
and :hover
; see the "Browser compatibility" section of the :hover
article for details.
<caption>
, <col>
, <colgroup>
, <tbody>
, <td>
, <tfoot>
, <th>
, <thead>
, <tr>
;<table>
element: width
to control the width of the table;border
, border-style
, border-color
, border-width
, border-collapse
, border-spacing
to control the aspect of cell borders, rules and frame;margin
and padding
to style the individual cell content;text-align
and vertical-align
to define the alignment of text and cell content.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table