Tables
The <table> element represents tabular data with rows and columns. It is appropriate when relationships between headers and cells matter for interpretation.
Overview
The <table> element represents tabular data with rows and columns. It is appropriate when relationships between headers and cells matter for interpretation.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| The HTMLTableCaptionElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating table caption elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableCellElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header cells (th) or data cells (td), in an HTML document. | 1 | 12 | 1 | 3 | 18 | 1 |
| The abbr property of the HTMLTableCellElement interface indicates an abbreviation associated with the cell. If the cell does not represent a header cell th, it is ignored. | 1 | 12 | 1 | 3 | 18 | 1 |
| The cellIndex read-only property of the HTMLTableCellElement interface represents the position of a cell within its row (tr). The first cell has an index of 0. | 1 | 12 | 1 | 3 | 18 | 1 |
| The colSpan property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. It reflects the colspan attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The headers property of the HTMLTableCellElement interface contains a list of IDs of th elements that are headers for this specific cell. | 1 | 12 | 1 | 3 | 18 | 1 |
| The rowSpan property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table. It reflects the rowspan attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The scope property of the HTMLTableCellElement interface indicates the scope of a th cell. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableColElement interface provides properties for manipulating single or grouped table column elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The span property of the HTMLTableColElement interface represents the number of columns this col or colgroup must span; this lets the column occupy space across multiple columns of the table. It reflects the span attribute. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement interface provides special properties and methods (beyond the regular HTMLElement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.caption property represents the table caption. If no caption element is associated with the table, this property is null. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.createCaption() method returns the caption element associated with a given table. If no element exists on the table, this method creates it, and then returns it. | 1 | 12 | 1 | 3 | 18 | 1 |
| The createTBody() method of HTMLTableElement objects creates and returns a new tbody element associated with a given table. | 20 | 12 | 25 | 6 | 25 | 6 |
| The createTFoot() method of HTMLTableElement objects returns the tfoot element associated with a given table. If no footer exists in the table, this method creates it, and then returns it. | 1 | 12 | 1 | 3 | 18 | 1 |
| The createTHead() method of HTMLTableElement objects returns the thead element associated with a given table. If no header exists in the table, this method creates it, and then returns it. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.deleteCaption() method removes the caption element from a given table. If there is no element associated with the table, this method does nothing. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.deleteRow() method removes a specific row (tr) from a given table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.deleteTFoot() method removes the tfoot element from a given table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.deleteTHead() removes the thead element from a given table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The insertRow() method of the HTMLTableElement interface inserts a new row (tr) in a given table, and returns a reference to the new row. | 1 | 12 | 1 | 4 | 18 | 3 |
| The read-only HTMLTableElement property rows returns a live HTMLCollection of all the rows in the table, including the rows contained within any thead, tfoot, and tbody elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.tBodies read-only property returns a live HTMLCollection of the bodies in a table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.tFoot property represents the tfoot element of a table. Its value will be null if there is no such element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableElement.tHead represents the thead element of a table. Its value will be null if there is no such element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableRowElement interface provides special properties and methods (beyond the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an HTML table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The cells read-only property of the HTMLTableRowElement interface returns a live HTMLCollection containing the cells in the row. The HTMLCollection is live and is automatically updated when cells are added or removed. | 1 | 12 | 1 | 3 | 18 | 1 |
| The deleteCell() method of the HTMLTableRowElement interface removes a specific row cell from a given tr. | 1 | 12 | 1 | 3 | 18 | 1 |
| The insertCell() method of the HTMLTableRowElement interface inserts a new cell (td) into a table row (tr) and returns a reference to the cell. | 1 | 12 | 1 | 3 | 18 | 1 |
insertCell (index parameter negative one) `index` parameter can be `-1` | 1 | 12 | 20 | 3 | 18 | 1 |
insertCell (index parameter optional) `index` parameter is optional | 1 | 12 | 20 | 3 | 18 | 1 |
| The rowIndex read-only property of the HTMLTableRowElement interface represents the position of a row within the whole table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The sectionRowIndex read-only property of the HTMLTableRowElement interface represents the position of a row within the current section (thead, tbody, or tfoot). | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLTableSectionElement interface provides special properties and methods (beyond the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies (thead, tfoot, and tbody, respectively) in an HTML table. | 1 | 12 | 1 | 3 | 18 | 1 |
| The deleteRow() method of the HTMLTableSectionElement interface removes a specific row (tr) from a given section. | 1 | 12 | 1 | 3 | 18 | 1 |
| The insertRow() method of the HTMLTableSectionElement interface inserts a new row (tr) in the given table sectioning element (thead, tfoot, or tbody), then returns a reference to this new row. | 1 | 12 | 1 | 3 | 18 | 1 |
| The rows read-only property of the HTMLTableSectionElement interface returns a live HTMLCollection containing the rows in the section. The HTMLCollection is live and is automatically updated when rows are added or removed. | 1 | 12 | 1 | 3 | 18 | 1 |
| Other | ||||||
| The border-collapse CSS property sets whether cells inside a table have shared or separate borders. | 1 | 12 | 1 | 1.1 | 18 | 1 |
| CSS property | ||||||
collapse | 1 | 79 | 1 | 1.1 | 18 | 1 |
separate | 1 | 79 | 1 | 1.1 | 18 | 1 |
| Other | ||||||
| The border-spacing CSS property sets the distance between the borders of adjacent cells in a table. This property applies only when border-collapse is separate. | 1 | 12 | 1 | 1 | 18 | 1 |
| The caption-side CSS property puts the content of a table's caption on the specified side. The values are relative to the writing-mode of the table. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
bottom | 1 | 79 | 1 | 1 | 18 | 1 |
bottom-outside Non-standard | | | 1 | Preview | | |
top | 1 | 79 | 1 | 1 | 18 | 1 |
top-outside Non-standard | | | 1 | Preview | | |
writing-mode relative values `top` and `bottom` are relative to the `writing-mode` value | | | 42 | | | |
| Other | ||||||
| The empty-cells CSS property sets whether borders and backgrounds appear around table cells that have no visible content. | 1 | 12 | 1 | 1.2 | 18 | 1 |
| CSS property | ||||||
hide | 1 | 12 | 1 | 1.2 | 18 | 1 |
show | 1 | 12 | 1 | 1.2 | 18 | 1 |
| Other | ||||||
| The table-layout CSS property sets the algorithm used to lay out table cells, rows, and columns. | 14 | 12 | 1 | 1 | 18 | 3 |
| CSS property | ||||||
auto | 14 | 12 | 1 | 1 | 18 | 3 |
fixed | 14 | 12 | 1 | 1 | 18 | 3 |
| HTML attribute | ||||||
span | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
span | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
colspan | 1 | 12 | 1 | 1 | 18 | 1 |
headers | 1 | 12 | 1 | 1 | 18 | 1 |
rowspan | 1 | 12 | 1 | 1 | 18 | 1 |
abbr | 1 | 12 | 1 | 1 | 18 | 1 |
colspan | 1 | 12 | 1 | 1 | 18 | 1 |
headers | 1 | 12 | 1 | 1 | 18 | 1 |
rowspan | 1 | 12 | 1 | 1 | 18 | 1 |
scope | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The HTML element defines one or more columns in a column group represented by its parent colgroup element. The element is only valid as a child of a colgroup element that has no span attribute defined. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The HTML element defines a group of columns within a table. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTML element encapsulates a set of table rows (tr elements), indicating that they comprise the body of a table's (main) data. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTML element defines a cell of a table that contains data and may be used as a child of the tr element. | 1 | 12 | 1 | 1 | 18 | 1 |
html.elements.td.rowspan.rowspan_zero `rowspan` attribute with value `0` (extend to the end of the row group) | 65 | 79 | ≤55 | | 65 | |
| The HTML element encapsulates a set of table rows (tr elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTML element defines a cell as the header of a group of table cells and may be used as a child of the tr element. The exact nature of this group is defined by the scope and headers attributes. | 1 | 12 | 1 | 1 | 18 | 1 |
html.elements.th.rowspan.rowspan_zero `rowspan` attribute with value `0` (extend to the end of the row group) | | | ≤55 | | | |
| The HTML element encapsulates a set of table rows (tr elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (th elements). | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTML element defines a row of cells in a table. The row's cells can then be established using a mix of td (data cell) and th (header cell) elements. | 1 | 12 | 1 | 1 | 18 | 1 |
- Starting with Firefox 20, the `index` parameter has been made optional and defaults to -1 as per HTML specification.
- This feature was removed in a later browser version (87)
- This feature was removed in a later browser version (87)
- Backgrounds applied to `<thead>` elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the `background-attachment` CSS property to `fixed`.
- Backgrounds applied to `<thead>` elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the `background-attachment` CSS property to `fixed`.
Syntax
<table>
<caption>Employee List</caption>
<thead>
<tr><th>Name</th><th>Department</th><th>Position</th></tr>
</thead>
<tbody>
<tr><td>Taro Yamada</td><td>Development Department</td><td>Team Leader</td></tr>
<tr><td>Hanako Sato</td><td>Sales Department</td><td>Manager</td></tr>
</tbody>
</table>Live demo
Use cases
Comparable records
Show metrics, schedules, inventories, or reports where each column has a consistent meaning across rows.
Structured summaries
Present data that benefits from header-cell relationships rather than card-style layout.
Cautions
- Tables can become hard to read on small screens, so responsive adaptations should preserve the underlying relationships.
- Avoid layout tables for generic positioning; CSS layout tools are more appropriate there.
Accessibility
- Meaningful headers, captions, and logical row-column relationships are essential for assistive technology users.
Related links
Powered by web-features