table (HTML element)

Spec
Depr. Empty Version
No No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<table summary="string">
</table>

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.

Figure 1. A simple table with no formatting A simple table with no formatting

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

User-contributed notes

Related Products