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.
<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>£2000</td> <td>£5000</td> </tr> <tr> <th scope="row">Extra treatments</th> <td>Not included</td> <td>£750</td> </tr> </tbody> </table>
The styles for this pattern can be found in the foundations on github.
Design and content
- 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
We are currently working on this.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.