We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

Tables live

Tables can help users compare or interrogate information.

Only use tables to present data.

Do not use a table to display non-data content or to improve the page layout.

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

Table size

Have more rows than columns where possible. Longer, rather than wider, tables make it easier for people to read and understand.
Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smart phone.

This guidance is from the gov.uk design system.

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>. Make the heading descriptive.

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>.