Tables live

Tables are a good way to present large amounts of complex information when the user needs to compare different things or or interrogate that information. The table format is familiar and, when done well, helps people to find answers to questions.

Example

Example

This table compares our Classic and Select Plus pet insurance
Compare Pet Insurance Classic Select Plus
Vet fees cover £2000 £5000
Extra treatments Not included £750

HTML

                            
<table>
    <caption>This table compares our Classic and Select Plus pet insurance</caption>
    <thead>
        <tr>
            <th scope="col">Compare Pet Insurance</th>
            <th scope="col">Classic</th>
            <th scope="col">Select Plus</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Vet fees cover</th>
            <td>&pound;2000</td>
            <td>&pound;5000</td>
        </tr>
        <tr>
            <th scope="row">Extra treatments</th>
            <td>Not included</td>
            <td>&pound;750</td>
        </tr>
    </tbody>
</table>

                            

Accessibility

Captions

A caption is the heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. The caption is provided by the <caption> element.

Headers and footers

Both columns and rows of a table can have headings. These are marked up as <th> (table heading). We also use the <thead>and <tbody> tags. Although these are not technically needed in all tables, they add some semantic value and are useful if a table needs to be printed as the <thead> element is repeated across all printed pages.

Table footers (<tfoot>) can be used if there is a lot of rows in a table. It will be displayed by a browser under the body content, but in the markup must be above it. If you have to support a very old browser test this display as in some older browsers it is displayed before the body. In this case move it to below the table content.

Row headings

When a row needs a heading the <td> of that row should be marked up as a <th>.

Scope

When the data that relates to the headings is ambiguous the attribute scope=“col” or scope=“row” should be added. The scope attribute defines the direction of the header cells and associates them with the corresponding data cells. The scope attribute is also needed for larger tables with one header row or column. We recommend always defining the scope of your column or row headings.

Top left cell

The top left cell of a table is often blank as there is no overarching header for the row headings and the content of the table has been described by the <caption>. This cell can be left blank, but must be marked up as an empty <td></td>.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change