table element is used to present data in a grid-like
fashion (in rows and columns), with appropriate headers to identify the
data contained in each column and row.
At its most
basic, a table is built using the
td elements (with
used for marking up the column or row headings), as shown in the example
HTML, which renders as shown in Figure 1.
The ordering of elements inside a table is important for validation, as detailed below:
if it exists, must go first. There can be only one.
thead if it exists, must follow. Then tfoot. Only one of each are allowed and they must be in this order if they are used. If either or both of these are used, they must each contain at least one tr element.
There must be at least one
tr or tbody and these must be last. The same table
cannot contain both
tbody elements are used they must each
contain at least one
Note: even though
must come before any
elements in the code, the contents of the
will still be shown below the rest of the table when viewed in a
Note: The specification pertaining to tables is subtly
different between HTML (4.01) and XHTML. In HTML 4.01, the
tbody elements are always required. However, both the
opening and closing elements of a
tbody element are
optional in HTML, and if you don't use them a validator will read it as if
there is a
tbody element there. In practice this means
there will not really be any difference in coding, although if you browse
the DOM you will always find a
tbody element if the
document was HTML even if one didn't exist in the
Here’s a very simple
<table> <tr> <th>Account Type</th> <th>Interest Rate</th> </tr> <tr> <td>Smart</td> <td>From 2%</td> </tr> <tr> <td>Young Saver</td> <td>From 1.6%</td> </tr> </table>
Use This For …
A table should only be used for tabular data. It should not be used (or, rather, misused) as a layout mechanism, whether for the layout of an entire web page, or for specific sections of a page. CSS should be used for laying out a page, as it ensures that the content is adaptable to different devices, and doesn’t cause problems when it’s linearized.
It causes no compatibility issues, and has excellent support across all tested browsers.