| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
The
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 table, tr, and td elements (with th elements
used for marking up the column or row headings), as shown in the example
HTML, which renders as shown in Figure 1.
A more complex table may
also include a caption; col and colgroup elements; and the structural thead, tfoot, and tbody elements, which are used to identify the
different regions in the table.
The ordering of elements inside a table is important for validation, as detailed below:
caption,
if it exists, must go first. There can be only one.
There can be any
number of col or colgroup elements, but not both. If
colgroup elements are used they may in turn contain any
number of col elements.
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 tr and tbody
elements. If tbody elements are used they must each
contain at least one tr
element.
tr elements, where used, must each
contain at least one td or th element, and these may be intermixed in any
combination - any cell may be a th or
td.
Note: even though tfoot
must come before any tbody or tr
elements in the code, the contents of the tfoot element
will still be shown below the rest of the table when viewed in a
browser.
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
source.
Example
Here’s a very simple
two-column, two-row table:
<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.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- align
sets the alignment or position of the table relative to surrounding content - bgcolor
defines the background color for the table - border
sets a border around the table - cellpadding
creates padding around the contents of table cells - cellspacing
creates space (in the form of margins) outside of table cells - frame
renders a border on distinct edges of the table - rules
creates a rule between table cells (for rows and columns) - summary
provides a non-visual summary of the table’s content or purpose - width
sets the table’s width in pixels or as a percentage
