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 deprecated| 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" |
<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 deprecated| above | 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