Status: Last call for comments. ISSUE-32 (table-summary) blocks progress to Last Call
table
elementStatus: Last call for comments. ISSUE-92 (cleanuptable) blocks progress to Last Call
caption
element,
followed by either zero or more colgroup
elements,
followed optionally by a thead
element, followed
optionally by a tfoot
element, followed by either zero
or more tbody
elements or one or more tr
elements, followed optionally by a tfoot
element (but
there can only be one tfoot
element child in
total).summary
(but see prose)interface HTMLTableElement : HTMLElement { attribute HTMLTableCaptionElement caption; HTMLElement createCaption(); void deleteCaption(); attribute HTMLTableSectionElement tHead; HTMLElement createTHead(); void deleteTHead(); attribute HTMLTableSectionElement tFoot; HTMLElement createTFoot(); void deleteTFoot(); readonly attribute HTMLCollection tBodies; HTMLElement createTBody(); readonly attribute HTMLCollection rows; HTMLElement insertRow(in optional long index); void deleteRow(in long index); attribute DOMString summary; };
The table
element represents data with
more than one dimension, in the form of a table.
Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.
There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.
Tables have rows and columns given by their descendants. A table must not have an empty row or column.
For tables that consist of more than just a grid of cells with headers in the first row and headers in the first column, and for any table in general where the reader might have difficulty understanding the content, authors should include explanatory information introducing the table. This information is useful for all users, but is especially useful for users who cannot see the table, e.g. users of screen readers.
Such explanatory information should introduce the purpose of the table, outline its basic cell structure, highlight any trends or patterns, and generally teach the user how to use the table.
For instance, the following table:
Negative | Characteristic | Positive |
---|---|---|
Sad | Mood | Happy |
Failing | Grade | Passing |
...might benefit from a description explaining the way the table is laid out, something like "Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column".
There are a variety of ways to include this information, such as:
<p>In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> <table> <caption>Characteristics with positive and negative sides</caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
caption
<table> <caption> <strong>Characteristics with positive and negative sides.</strong> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
caption
, in a details
element<table> <caption> <strong>Characteristics with positive and negative sides.</strong> <details> <summary>Help</summary> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </details> </caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
figure
<figure> <figcaption>Characteristics with positive and negative sides</figcaption> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> <table> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table> </figure>
figure
's figcaption
<figure> <figcaption> <strong>Characteristics with positive and negative sides</strong> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </figcaption> <table> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table> </figure>
Authors may also use other techniques, or combinations of the above techniques, as appropriate.
The best option, of course, rather than writing a description explaining the way the table is laid out, is to adjust the table such that no explanation is needed.
In the case of the table used in the examples above, a simple
rearrangement of the table so that the headers are on the top and
left sides removes the need for an explanation as well as removing
the need for the use of headers
attributes:
<table> <caption>Characteristics with positive and negative sides</caption> <thead> <tr> <th> Characteristic <th> Negative <th> Positive <tbody> <tr> <th> Mood <td> Sad <td> Happy <tr> <th> Grade <td> Failing <td> Passing </table>
The summary
attribute on table
elements was suggested in earlier
versions of the language as a technique for providing explanatory
text for complex tables for users of screen readers. One of the techniques described above should be used
instead.
In particular, authors are encouraged to consider
whether their explanatory text for tables is likely to be useful to
the visually impaired: if their text would not be useful, then it is
best to not include a summary
attribute. Similarly, if
their explanatory text could help someone who is not visually
impaired, e.g. someone who is seeing the table for the first time,
then the text would be more useful before the table or in the
caption
. For example, describing the conclusions of the
data in a table is useful to everyone; explaining how to read the
table, if not obvious from the headers alone, is useful to everyone;
describing the structure of the table, if it is easy to grasp
visually, may not be useful to everyone, but it might also not be
useful to users who can quickly navigate the table with an
accessibility tool.
caption
[ = value ]Returns the table's caption
element.
Can be set, to replace the caption
element. If the
new value is not a caption
element, throws a
HIERARCHY_REQUEST_ERR
exception.
createCaption
()Ensures the table has a caption
element, and returns it.
deleteCaption
()Ensures the table does not have a caption
element.
tHead
[ = value ]Returns the table's thead
element.
Can be set, to replace the thead
element. If the
new value is not a thead
element, throws a
HIERARCHY_REQUEST_ERR
exception.
createTHead
()Ensures the table has a thead
element, and returns it.
deleteTHead
()Ensures the table does not have a thead
element.
tFoot
[ = value ]Returns the table's tfoot
element.
Can be set, to replace the tfoot
element. If the
new value is not a tfoot
element, throws a
HIERARCHY_REQUEST_ERR
exception.
createTFoot
()Ensures the table has a tfoot
element, and returns it.
deleteTFoot
()Ensures the table does not have a tfoot
element.
tBodies
Returns an HTMLCollection
of the tbody
elements of the table.
createTBody
()Creates a tbody
element, inserts it into the table, and returns it.
rows
Returns an HTMLCollection
of the tr
elements of the table.
insertRow
(index)Creates a tr
element, along with a tbody
if required, inserts them into the table at the position given by the argument, and returns the tr
.
The position is relative to the rows in the table. The index −1 is equivalent to inserting at the end of the table.
If the given position is less than −1 or greater than the number of rows, throws an INDEX_SIZE_ERR
exception.
deleteRow
(index)Removes the tr
element with the given position in the table.
The position is relative to the rows in the table. The index −1 is equivalent to deleting the last row of the table.
If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an INDEX_SIZE_ERR
exception.
caption
elementStatus: Last call for comments
table
element.table
elements.interface HTMLTableCaptionElement : HTMLElement {};
The caption
element represents the title of the
table
that is its parent, if it has a parent and that
is a table
element.
When a table
element is the only content in a
figure
element other than the figcaption
,
the caption
element should be omitted in favor of the
figcaption
.
A caption can introduce context for a table, making it significantly easier to understand.
Consider, for instance, the following table:
1 | 2 | 3 | 4 | 5 | 6 | |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
In the abstract, this table is not clear. However, with a caption giving the table's number (for reference in the main prose) and explaining its use, it makes more sense:
<caption> <p>Table 1. <p>This table shows the total score obtained from rolling two six-sided dice. The first row represents the value of the first die, the first column the value of the second die. The total is given in the cell that corresponds to the values of the two dice. </caption>
colgroup
elementStatus: Last call for comments
table
element, after any
caption
elements and before any thead
,
tbody
, tfoot
, and tr
elements.span
attribute is present: Empty.span
attribute is absent: Zero or more col
elements.span
interface HTMLTableColElement : HTMLElement { attribute unsigned long span; };
The colgroup
element represents a group of one or more columns in the table
that
is its parent, if it has a parent and that is a table
element.
If the colgroup
element contains no col
elements, then the element may have a span
content attribute
specified, whose value must be a valid non-negative
integer greater than zero.
col
elementStatus: Last call for comments
colgroup
element that doesn't have
a span
attribute.span
HTMLTableColElement
, same as for
colgroup
elements. This interface defines one member,
span
.
If a col
element has a parent and that is a
colgroup
element that itself has a parent that is a
table
element, then the col
element
represents one or more columns in the column group represented by that
colgroup
.
The element may have a span
content attribute
specified, whose value must be a valid non-negative
integer greater than zero.
tbody
elementStatus: Last call for comments
table
element, after any
caption
, colgroup
, and
thead
elements, but only if there are no
tr
elements that are children of the
table
element.tr
elementsinterface HTMLTableSectionElement : HTMLElement { readonly attribute HTMLCollection rows; HTMLElement insertRow(in optional long index); void deleteRow(in long index); };
The HTMLTableSectionElement
interface is also
used for thead
and tfoot
elements.
The tbody
element represents a block of rows that consist of a body of data for
the parent table
element, if the tbody
element has a parent and it is a table
.
rows
Returns an HTMLCollection
of the tr
elements of the table section.
insertRow
( [ index ] )Creates a tr
element, inserts it into the table section at the position given by the argument, and returns the tr
.
The position is relative to the rows in the table section. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.
If the given position is less than −1 or greater than the number of rows, throws an INDEX_SIZE_ERR
exception.
deleteRow
(index)Removes the tr
element with the given position in the table section.
The position is relative to the rows in the table section. The index −1 is equivalent to deleting the last row of the table section.
If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an INDEX_SIZE_ERR
exception.
thead
elementStatus: Last call for comments
table
element, after any
caption
, and colgroup
elements and before any tbody
, tfoot
, and
tr
elements, but only if there are no other
thead
elements that are children of the
table
element.tr
elementsHTMLTableSectionElement
, as defined for
tbody
elements.The thead
element represents the block of rows that consist of the column labels
(headers) for the parent table
element, if the
thead
element has a parent and it is a
table
.
tfoot
elementStatus: Last call for comments
table
element, after any
caption
, colgroup
, and thead
elements and before any tbody
and tr
elements, but only if there are no other tfoot
elements that are children of the table
element.table
element, after any
caption
, colgroup
, thead
,
tbody
, and tr
elements, but only if there
are no other tfoot
elements that are children of the
table
element.tr
elementsHTMLTableSectionElement
, as defined for
tbody
elements.The tfoot
element represents the block of rows that consist of the column summaries
(footers) for the parent table
element, if the
tfoot
element has a parent and it is a
table
.
tr
elementStatus: Last call for comments
thead
element.tbody
element.tfoot
element.table
element, after any
caption
, colgroup
, and thead
elements, but only if there are no tbody
elements that
are children of the table
element.thead
element: Zero or more th
elementstd
or th
elementsinterface HTMLTableRowElement : HTMLElement { readonly attribute long rowIndex; readonly attribute long sectionRowIndex; readonly attribute HTMLCollection cells; HTMLElement insertCell(in optional long index); void deleteCell(in long index); };
The tr
element represents a row of cells in a table.
rowIndex
Returns the position of the row in the table's rows
list.
Returns −1 if the element isn't in a table.
sectionRowIndex
Returns the position of the row in the table section's rows
list.
Returns −1 if the element isn't in a table section.
cells
Returns an HTMLCollection
of the td
and th
elements of the row.
insertCell
( [ index ] )Creates a td
element, inserts it into the table
row at the position given by the argument, and returns the
td
.
The position is relative to the cells in the row. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the row.
If the given position is less than −1 or greater than
the number of cells, throws an INDEX_SIZE_ERR
exception.
deleteCell
(index)Removes the td
or th
element with the
given position in the row.
The position is relative to the cells in the row. The index −1 is equivalent to deleting the last cell of the row.
If the given position is less than −1 or greater than
the index of the last cell, or if there are no cells, throws an
INDEX_SIZE_ERR
exception.
td
elementStatus: Last call for comments
tr
element.colspan
rowspan
headers
interface HTMLTableDataCellElement : HTMLTableCellElement {};
The td
element represents a data cell in a table.
th
elementStatus: Last call for comments
tr
element.colspan
rowspan
headers
scope
interface HTMLTableHeaderCellElement : HTMLTableCellElement { attribute DOMString scope; };
The th
element represents a header cell in a table.
The th
element may have a scope
content attribute
specified. The scope
attribute is
an enumerated attribute with five states, four of which
have explicit keywords:
row
keyword, which maps to the row statecol
keyword, which maps to the column staterowgroup
keyword,
which maps to the row group stateth
element's
scope
attribute must not be in
the row group state if
the element is not anchored in a row group.colgroup
keyword,
which maps to the column group stateth
element's scope
attribute must
not be in the column
group state if the element is not anchored in a column group.The scope
attribute's
missing value default is the auto state.
The following example shows how the scope
attribute's rowgroup
value affects which
data cells a header cell applies to.
Here is a markup fragment showing a table:
<table> <thead> <tr> <th> ID <th> Measurement <th> Average <th> Maximum <tbody> <tr> <td> <th scope=rowgroup> Cats <td> <td> <tr> <td> 93 <th> Legs <td> 3.5 <td> 4 <tr> <td> 10 <th> Tails <td> 1 <td> 1 <tbody> <tr> <td> <th scope=rowgroup> English speakers <td> <td> <tr> <td> 32 <th> Legs <td> 2.67 <td> 4 <tr> <td> 35 <th> Tails <td> 0.33 <td> 1 </table>
This would result in the following table:
ID | Measurement | Average | Maximum |
---|---|---|---|
Cats | |||
93 | Legs | 3.5 | 4 |
10 | Tails | 1 | 1 |
English speakers | |||
32 | Legs | 2.67 | 4 |
35 | Tails | 0.33 | 1 |
The headers in the first row all apply directly down to the rows in their column.
The headers with the explicit scope
attributes apply to all the
cells in their row group other than the cells in the first column.
The remaining headers apply just to the cells to the right of them.
td
and th
elementsStatus: Last call for comments
The td
and th
elements may have a colspan
content
attribute specified, whose value must be a valid non-negative
integer greater than zero.
The td
and th
elements may also have a
rowspan
content
attribute specified, whose value must be a valid non-negative
integer.
These attributes give the number of columns and rows respectively that the cell is to span. These attributes must not be used to overlap cells.
The td
and th
element may have a headers
content
attribute specified. The headers
attribute, if specified,
must contain a string consisting of an unordered set of unique
space-separated tokens, each of which must have the value of
an ID of a th
element taking part in the same table as the td
or
th
element.
A th
element with ID id is said
to be directly targeted by all td
and
th
elements in the same table that have headers
attributes whose values
include as one of their tokens the ID id. A
th
element A is said to be
targeted by a th
or td
element
B if either A is directly
targeted by B or if there exists an element
C that is itself targeted by the element
B and A is directly
targeted by C.
A th
element must not be targeted by
itself.
The td
and th
elements implement
interfaces that inherit from the HTMLTableCellElement
interface:
interface HTMLTableCellElement : HTMLElement { attribute unsigned long colSpan; attribute unsigned long rowSpan; [PutForwards=value] readonly attribute DOMSettableTokenList headers; readonly attribute long cellIndex; };
cellIndex
Returns the position of the cell in the row's cells
list. This does not necessarily
correspond to the x-position of the cell in
the table, since earlier cells might cover multiple rows or
columns.
Returns 0 if the element isn't in a row.
Status: Last call for comments
This section is non-normative.
The following shows how might one mark up the bottom part of table 45 of the Smithsonian physical tables, Volume 71:
<table> <caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption> <thead> <tr> <th rowspan=2>Grade.</th> <th rowspan=2>Yield Point.</th> <th colspan=2>Ultimate tensile strength</th> <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th> <th rowspan=2>Per cent reduct. area.</th> </tr> <tr> <th>kg/mm<sup>2</sup></th> <th>lb/in<sup>2</sup></th> </tr> </thead> <tbody> <tr> <td>Hard</td> <td>0.45 ultimate</td> <td>56.2</td> <td>80,000</td> <td>15</td> <td>20</td> </tr> <tr> <td>Medium</td> <td>0.45 ultimate</td> <td>49.2</td> <td>70,000</td> <td>18</td> <td>25</td> </tr> <tr> <td>Soft</td> <td>0.45 ultimate</td> <td>42.2</td> <td>60,000</td> <td>22</td> <td>30</td> </tr> </tbody> </table>
This table could look like this:
Grade. | Yield Point. | Ultimate tensile strength | Per cent elong. 50.8 mm or 2 in. | Per cent reduct. area. | |
---|---|---|---|---|---|
kg/mm2 | lb/in2 | ||||
Hard | 0.45 ultimate | 56.2 | 80,000 | 15 | 20 |
Medium | 0.45 ultimate | 49.2 | 70,000 | 18 | 25 |
Soft | 0.45 ultimate | 42.2 | 60,000 | 22 | 30 |
The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:
<table> <thead> <tr> <th> <th>2008 <th>2007 <th>2006 <tbody> <tr> <th>Net sales <td>$ 32,479 <td>$ 24,006 <td>$ 19,315 <tr> <th>Cost of sales <td> 21,334 <td> 15,852 <td> 13,717 <tbody> <tr> <th>Gross margin <td>$ 11,145 <td>$ 8,154 <td>$ 5,598 <tfoot> <tr> <th>Gross margin percentage <td>34.3% <td>34.0% <td>29.0% </table>
The following shows how one might mark up the operating expenses table from lower on the same page of that document:
<table> <colgroup> <col> <colgroup> <col> <col> <col> <thead> <tr> <th> <th>2008 <th>2007 <th>2006 <tbody> <tr> <th scope=rowgroup> Research and development <td> $ 1,109 <td> $ 782 <td> $ 712 <tr> <th scope=row> Percentage of net sales <td> 3.4% <td> 3.3% <td> 3.7% <tbody> <tr> <th scope=rowgroup> Selling, general, and administrative <td> $ 3,761 <td> $ 2,963 <td> $ 2,433 <tr> <th scope=row> Percentage of net sales <td> 11.6% <td> 12.3% <td> 12.6% </table>
This table could look like this:
2008 | 2007 | 2006 | |
---|---|---|---|
Research and development | $ 1,109 | $ 782 | $ 712 |
Percentage of net sales | 3.4% | 3.3% | 3.7% |
Selling, general, and administrative | $ 3,761 | $ 2,963 | $ 2,433 |
Percentage of net sales | 11.6% | 12.3% | 12.6% |