Back to the pattern library

Table

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.

More detailed information on how to use table patterns can be found in our design guidance.

Example

Example

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>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Tables have:

  • a font size of 20px reducing to 16px under 750px viewport size
  • column and row headings in Avenir demi bold
  • data cells in Avenir regular
  • cell padding of top, right, bottom 16px and left 0px
  • a table heading border bottom of 2px at #C4C4C4
  • row headings have a border of 1px at #C4C4C4 with a right hand gutter of 50px
  • table cells have a border of 1px at #C4C4C4
  • a caption (table title) in Avenir demi bold at 20px

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

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