Code standards for tables

Basic table markup

Example


<table>
    <caption>This example shows the basic mark-up used for a table</caption>
    <thead>
        <tr>
            <th>Heading column 1</th>
            <th>Heading column 2</th>
            <th>Heading column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content column 1</td>
            <td>Content column 2</td>
            <td>Content column 3</td>
        </tr>
    </tbody>
</table>
            

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

Example


<table>
    <caption>This example shows header and footer mark-up used for a table</caption>
    <thead>
        <tr>
            <th>Heading column 1</th>
            <th>Heading column 2</th>
            <th>Heading column 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer column 1</td>
            <td>Footer column 2</td>
            <td>Footer column 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Content column 1</td>
            <td>Content column 2</td>
            <td>Content column 3</td>
        </tr>
    </tbody>
</table>
            

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

This example shows header and footer mark-up used for a table
Heading column 1 Heading column 2 Heading column 3
Footer column 1 Footer column 2 Footer column 3
Row heading 1 Content column 1 Content column 2 Content column 3
Row heading 2 Content column 1 Content column 2 Content column 3

Example


<table>
    <caption>This example shows header and footer mark-up used for a table</caption>
    <thead>
        <tr>
            <td></td>
            <th scope=“col”>Heading column 1</th>
            <th scope=“col”>Heading column 2</th>
            <th scope=“col”>Heading column 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td>Footer column 1</td>
            <td>Footer column 2</td>
            <td>Footer column 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope=“row”>Row heading 1</th>
            <td>Content column 1</td>
            <td>Content column 2</td>
            <td>Content column 3</td>
        </tr>
        <tr>
            <th scope=“row”>Row heading 2</th>
            <td>Content column 1</td>
            <td>Content column 2</td>
            <td>Content column 3</td>
        </tr>
    </tbody>
</table>
        

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>

.

Responsive tables

We have created a basic responsive table as seen in the table patterns page you can use this by adding the class table-smallscreen--stacked to your table. For the styles to work correctly, you must match the markup structure in the example. When deciding whether to use this solution think carefully abbout if it will fit the needs of your users. If in doubt don't use it, or build your own responsive table. We have made this solution as simple as possible and cannot varify its accessibility yet on smaller device size. Please research your service with users of all abilities.

This pattern is experimental

Feel free to use this pattern in your service. Make sure you test it across a range of devices with users of all abilities. Please let us know about anything you find out.

Example


<table class="table-smallscreen--stacked">
    <caption>This example shows how to implement the responsive table</caption>
    <thead>
        <tr>
            <td></td>
            <th scope=“col”>Heading column 1</th>
            <th scope=“col”>Heading column 2</th>
            <th scope=“col”>Heading column 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td>Footer column 1</td>
            <td>Footer column 2</td>
            <td>Footer column 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope=“row”>Row heading 1</th>
            <td data-th="Heading column 1">Content column 1</td>
            <td data-th="Heading column 2">Content column 2</td>
            <td data-th="Heading column 3">Content column 3</td>
        </tr>
        <tr>
            <th scope=“row”>Row heading 2</th>
            <td data-th="Heading column 1">Content column 1</td>
            <td data-th="Heading column 2">Content column 2</td>
            <td data-th="Heading column 3">Content column 3</td>
        </tr>
    </tbody>
</table>
            

Feedback

Did you find what you were looking for?