The semantic HTML <table></table> element displays a spreadsheet grid (with or without lines) for demonstrating relationships by horizontal or vertical alignment of several items arranged in rows and columns. It is not to be used to arrange page elements for purely aesthetic purposes, as this violates its semantic nature which is depended upon by automated clients such as search engines and accessibility technology (Braille and voice browsers). For alternative techniques, see positioning.
Attributes
Optional attributes
| Attribute | Value | Description |
|---|---|---|
| summary | text | A short description to supplement the table's contents for visually impaired users. Like alt, this is exclusively for enhancing the experience of such users; for other users the caption or an entirely separate description is more appropriate. |
Global attributes
Content
<caption>
The HTML <caption></caption> element defines a table caption. This optional element must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table. When the <table> element that is the parent of the <caption> which is the only descendant of a <figure> element, use the <figcaption> element instead.
<thead>
The semantic HTML <thead></thead> element defines a table head. This optional element must be placed within a <table> element and before any <tbody>, <tfoot>, and/or elements. The end tag may be omitted if the <thead> element is immediately followed by a <tbody> or <tfoot> element.
<tbody>
The semantic HTML <tbody></tbody> element defines a table body. This optional element must be placed within a <table> element and after a <thead> or <caption> element and may only contain , , or elements. The end tag may be omitted if the <tbody> element is immediately followed by another <tbody> or <tfoot> element, of if there is no more content in the parent <table> element.
<tr>
The semantic HTML element defines a table row. It must be placed within a <table>, <thead>, <tbody>, or <tfoot> element and may only contain <td> and <th> elements. The end tag may be omitted if the element is immediately followed by another element, or if the parent <table> element doesn't have any more content.
<th>
The semantic HTML element defines a table header. It must be placed within a <table>, <thead>, <tbody>, or <tfoot> which contains a element and may only contain the table header. The end tag may be omitted, if it is immediately followed by another or element or if there are no more data in its parent element.
<td>
The semantic HTML element defines a table cell. It must be placed within a <table>, <thead>, <tbody>, or <tfoot> which contains a element and may only contain table data. The end tag may be omitted, if it is immediately followed by a or another element or if there are no more data in its parent element.
<tfoot>
The semantic HTML <tfoot></tfoot> element defines a table footer. This optional element must be placed within a <table> element and either before or after any <tbody> or elements, but not intermixed with them. The end tag may be omitted if the <tbody> element is immediately followed by a <tbody>, or if there is no more content in the parent <table> element.
Document Object Model
table objects expose the HTMLTableElement interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of tables in HTML.
| W3C | Mozilla | Microsoft |
|---|---|---|
| [1] | [2] | [3] |
Properties
rows
| Data type | HTMLCollection |
|---|---|
| Standard | DOM Level 1 HTMLDOM Level 2 HTML |
| Documentation | Mozilla Microsoft |
A collection of all the rows in the table.
Methods
External links
- The table element in HTML5
- The HTMLTableElement interface in HTML DOM Level 2
- The TABLE element in HTML 4.01
The semantic HTML element defines a table cell. It must be placed within a <table>, <thead>, <tbody>, or <tfoot> which contains a element and may only contain table data. The end tag may be omitted, if it is immediately followed by a or another element or if there are no more data in its parent element.
Attributes
| Attribute | Value | Description | |
|---|---|---|---|
colspan |
number | This attribute contains a non-negative integer value that indicates how many columns the cell extends to. Its default value is 1; if its value is set to 0, it will extend until the end of the <colgroup> the cell belongs to.
| |
headers |
id | This attributes is a list of space-separated strings, each corresponding to the id attribute of the | elements that applies to this element. |
rowspan |
number | This attribute contains a non-negative integer value that indicates how many rows the cell extends to. Its default value is 1; if its value is set to 0, it will extend until the end of the table section (<thead>, <tbody>, <tfoot>, etc.) the cell belongs to.
|
Global attributes
HTML example:
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>