Tables

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
This table shows compares points earnings in 2018 and 2019
Partner 2018 2019
Co-op Food 709.09 654.45
Co-op Insurance 49.99 52.35
Points total
This table lists the 10 most recent times that you’ve earned Co‑op rewards
Date and time For you Dividend points
8 February 2021, 9:00pm 3.75
7 February 2021, 7:28pm 12.10
7 February 2021, 7:28pm -£0.09
1 February 2021, 1:40pm £0.05 8.50
3 January 2021, 4:45pm £0.04 12.65
3 January 2021, 4:45pm -£0.29
27 January 2021, 9:10pm £0.29 45.28
27 January 2021, 9:10pm -£0.37
24 January 2021, 2:50pm £0.12 12.70
23 January 2021, 5:13pm £0.05 2.98

HTML

                                    
<div class="coop-table-wrapper">
  <table class="coop-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>
</div>

<div class="coop-table-wrapper">
  <table class="coop-table">
    <caption class="coop-table__caption">
      This table shows compares points earnings in 2018 and 2019
    </caption>
    <thead>
      <tr class="coop-table__row">
        <th class="coop-table__header" scope="col">Partner</th>
        <th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2018</th>
        <th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2019</th>
      </tr>
    </thead>
    <tbody>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">Co-op Food</th>
        <td class="coop-table__cell coop-table__cell--numeric">709.09</td>
        <td class="coop-table__cell coop-table__cell--numeric">654.45</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">Co-op Insurance</th>
        <td class="coop-table__cell coop-table__cell--numeric">49.99</td>
        <td class="coop-table__cell coop-table__cell--numeric">52.35</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="coop-table__row">
        <th class="coop-table__footer" scope="row">Points total</th>
        <td class="coop-table__footer coop-table__footer--numeric">759.08</td>
        <td class="coop-table__footer coop-table__footer--numeric">706.80</td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="coop-table-wrapper">
  <table class="coop-table">
    <caption class="coop-table__caption">
      This table lists the 10 most recent times that you’ve earned Co‑op rewards
    </caption>
    <thead>
      <tr class="coop-table__row">
        <th class="coop-table__header coop-t-nowrap" scope="col">Date and time</th>
        <th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="15%">For you</th>
        <th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="25%">Dividend points</th>
      </tr>
    </thead>
    <tbody>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">8 February 2021, 9:00pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap"></td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">3.75</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">7 February 2021, 7:28pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap"></td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">12.10</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">7 February 2021, 7:28pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">-£0.09</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">1 February 2021, 1:40pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">£0.05</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">8.50</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">3 January 2021, 4:45pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">£0.04</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">12.65</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">3 January 2021, 4:45pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">-£0.29</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">27 January 2021, 9:10pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">£0.29</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">45.28</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">27 January 2021, 9:10pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">-£0.37</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">24 January 2021, 2:50pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">£0.12</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">12.70</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row">23 January 2021, 5:13pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">£0.05</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap">2.98</td>
      </tr>
    </tbody>
  </table>
</div>

                                    

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