Warning:
This wiki has been archived and is now read-only.
Elements/table
From HTML Wiki
< Elements
Contents
<table>
The <table> element represents data with more than one dimension, in the form of a table.
Point
- Tables must not be used as layout aids. There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.
- Users 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.[Example B]
- Tables have rows and columns given by their descendants. A table must not have an empty row or column.
HTML Attributes
summary
= explanatory information introducing the table
See also global attributes.
Examples
Example A
[try it]:
<table> <caption>Characteristics with positive and negative sides</caption> <thead> <tr> <th>Characteristic</th> <th>Negative</th> <th>Positive</th> </tr> </thead> <tbody> <tr> <th>Mood</th> <td>Sad</td> <td>Happy</td> </tr> <tr> <th>Grade</th> <td>Failing</td> <td>Passing</td> </tr> </tbody> </table>
Example B
The following example is including explanatory information introducing the table by next to the table in the same figure [try it]:
<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> <th>Characteristic</th> <th id="p">Positive</th> </tr> </thead> <tbody> <tr> <td headers="n r1">Sad</td> <th id="r1">Mood</th> <td headers="p r1">Happy</td> </tr> <tr> <td headers="n r2">Failing</td> <th id="r2">Grade</th> <td headers="p r2">Passing</td> </tr> </tbody> </table> </figure>
HTML Reference
The HTML5 specification defines the <table> element in 4.9.1 The table element.