The HTML <table>
element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 |
Attributes
This element includes the global attributes. The following attributes listed on this page are now deprecated.
align
- This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:
- left: the table is displayed on the left side of the document;
- center: the table is displayed in the center of the document;
- right: the table is displayed on the right side of the document.
Usage Note- Do not use this attribute, as it has been deprecated. The
<table>
element should be styled using CSS. Setmargin-left
andmargin-right
toauto
ormargin
to0 auto
to achieve an effect that is similar to the align attribute. - Prior to Firefox 4, Firefox also supported the
middle
,absmiddle
, andabscenter
values as synonyms ofcenter
, in quirks mode only.
bgcolor
- This attribute defines the background color of a table. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings:
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" Usage note: Do not use this attribute, as it has been deprecated. The<table>
element should be styled using CSS. Use thebackground-color
property in CSS to create an effect that is similar to thebgcolor
attribute.
border
- This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the
frame
attribute is set to void.Usage note: Do not use this attribute, as it has been deprecated. The<table>
element should be styled using CSS. To create an effect similar to the border attribute, theborder
,border-color
,border-width
andborder-style
CSS properties should be used.
cellpadding
- This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).
Usage note: Do not use this attribute, as it has been deprecated. The
<table>
element should be styled using CSS. To create an effect similar to the cellpadding attribute, apply theborder-collapse
property to the<table>
element, with its value set to collapse, and thepadding
property to the<td>
element.
cellspacing
- This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space 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.
Usage note: Do not use this attribute, as it has been deprecated. The
<table>
element should be styled using CSS. To create an effect similar to the cellspacing attribute, apply theborder-spacing
property to the<table>
element. Border-spacing does not have any effect ifborder-collapse
is set to collapse.
frame
- 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 Usage note: Do not use this attribute, as it has been deprecated. The<table>
element should be styled using CSS. To create an effect similar to the frame attribute, use theborder-style
andborder-width
properties.
rules
- This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
- none, which indicates that no rules will be displayed; it is the default value;
- groups, which will cause 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 cause the rules to be displayed between rows;
- columns, which will cause the rules to be displayed between columns;
- all, which will cause the rules to be displayed between rows and columns.
summary
- This attribute defines an alternative text that summarizes the content of the table. Typically, it allows visually impaired people who are browsing the web with a Braille screen, to acquire information about the table. If the information added by this attribute is also useful to people who are not visually impaired, consider using the
<caption>
instead. The summary attribute is not mandatory and may be omitted when a<caption>
element fulfills its role.Usage Note: Do not use this attribute, as it has been deprecated. Instead, choose one of these methods to add a description of a table:- Use prose around the table (this method is less semantic).
- Add a description in the table's
<caption>
element. - Add a description 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 a description is not needed (e.g. use
<th>
and<thead>
elements).
width
- This attribute defines the width of the table. The width may be defined by pixels or a percentage value. A percentage value will be defined by the width of the container in which the table is placed.
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> <tbody> <tr> <td>Body content 1</td> <td>Body content 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer content 1</td> <td>Footer content 2</td> </tr> </tfoot> </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>
table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; }
Accessibility concerns
Captions
By supplying a <caption>
element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.
- MDN Adding a caption to your table with <caption>
- Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials
Scoping rows and columns
The scope
attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.
Example
<table> <caption>Color names and values</caption> <tbody> <tr> <th scope="col">Name</th> <th scope="col">HEX</th> <th scope="col">HSLa</th> <th scope="col">RGBa</th> </tr> <tr> <th scope="row">Teal</th> <td><code>#51F6F6</code></td> <td><code>hsla(180, 90%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 1)</code></td> </tr> <tr> <th scope="row">Goldenrod</th> <td><code>#F6BC57</code></td> <td><code>hsla(38, 90%, 65%, 1)</code></td> <td><code>rgba(246, 188, 87, 1)</code></td> </tr> </tbody> </table>
Providing a declaration of scope="col"
on a <th>
element will help describe that the cell is at the top of a column. Providing a declaration of scope="row"
on a <th>
element will help describe that the cell is the first in a row.
- MDN Tables for visually impaired users
- Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials
- Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials
- H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0
Complicated tables
Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the colspan
and rowspan
attributes.
Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the colspan
and rowspan
attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.
If the table cannot be broken apart, use a combination of the id
and headers
attributes to programmatically associate each table cell with the header(s) the cell is associated with.
- MDN Tables for visually impaired users
- Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials
- H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0
- Creating a bar chart from a HTML table
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'table element' in that specification. |
Living Standard | |
HTML5 The definition of 'table element' in that specification. |
Recommendation |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
align | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
bgcolor | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
border | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
cellpadding | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
cellspacing | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
frame | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
rules | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
summary | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
width | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
See also
- Other table-related HTML Elements:
<caption>
,<col>
,<colgroup>
,<tbody>
,<td>
,<tfoot>
,<th>
,<thead>
,<tr>
; - CSS properties that may be especially useful to style the
<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
andpadding
to style the individual cell content;text-align
andvertical-align
to define the alignment of text and cell content.