You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Components

Table

Published 19 August 2020
The Design System's table component make it easier to compare and scan information.
Open this example in a new window

Sample HTML 

<table class="ds_table">
    <caption>Public holidays in 2020</caption>

    <thead>
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Day</th>
            <th scope="col">Holiday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10 April</td>
            <td>Friday</td>
            <td>Good Friday</td>
        </tr>
        <tr>
            <td>8 May</td>
            <td>Friday</td>
            <td>Early May Bank Holiday</td>
        </tr>
        <tr>
            <td>25 May</td>
            <td>Monday</td>
            <td>Spring Bank Holiday</td>
        </tr>
        <tr>
            <td>3 August</td>
            <td>Monday</td>
            <td>Summer Bank Holiday</td>
        </tr>
    </tbody>
</table>

Usage

Table caption

All tables must include a caption element that describes the table in the same way you might use a heading element. A well-written caption adds context to a table and makes it easier to understand.

Table headers

Use table header elements to describe what the data in rows or columns represents. It is a good idea to use the scope attribute to denote whether a header applies to a row or a column to help users of assistive technology.

Mobile behaviour

In general mobile devices have room for around three columns of data, depending on the length of the data being presented. If there is a lot of data in a table it might not display well on small screens. There are two alternative displays you can use, depending on your use case.

Scrolling table

In a scrolling table, if there are too many columns to display in the content area the first column becomes sticky while the rest of the table is allowed to scroll beneath it. For that reason the data in the first column should be broadly indicative of what the data in the column is about, as in this example where it is the name of the item being described in the row of data.

Pros:

  • easy to compare data between rows
  • table display is preserved

Cons:

  • requires additional interaction (scroll or swipe) from the user
  • not all data is visible at once
Open this example in a new window

Sample HTML 

<table class="ds_table" data-smallscreen="scrolling">
    <caption>Highest peaks in Scotland</caption>

    <thead>
        <tr>
            <th>Name</th>
            <th>Height (m)</th>
            <th>Height (ft)</th>
            <th>Region</th>
            <th>County</th>
            <th>Grid reference</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ben Nevis</td>
            <td align="right">1,345</td>
            <td align="right">4,411</td>
            <td>Fort William to Loch Treig &amp; Loch Leven</td>
            <td>Highland</td>
            <td>NN166712</td>
        </tr>

        <tr>
            <td>Ben Macdui</td>
            <td align="right">1,309</td>
            <td align="right">4,295</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire/Moray</td>
            <td>NN988989</td>
        </tr>

        <tr>
            <td>Braeriach</td>
            <td align="right">1,296</td>
            <td align="right">4,252</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire/Highland</td>
            <td>NN953999</td>
        </tr>

        <tr>
            <td>Cairn Toul</td>
            <td align="right">1,291</td>
            <td align="right">4,236</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire</td>
            <td>NN963972</td>
        </tr>
    </tbody>
</table>

Collapse to boxes

In a table that collapses to boxes, the rows of the table are transformed into individual blocks of data.

Pros:

  • provides an easily-digestable summary of the data

Cons:

  • difficult to compare data between rows, since they’ve now been transformed into boxes and separated
  • does not look like a table and this non-standard display may be unfamiliar to users
Open this example in a new window

Sample HTML 

<table class="ds_table" data-smallscreen="boxes">
    <caption>Highest peaks in Scotland</caption>

    <thead>
        <tr>
            <th scope="col">Name</th>
            <th>Height (m)</th>
            <th>Height (ft)</th>
            <th>Region</th>
            <th>County</th>
            <th>Grid reference</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ben Nevis</td>
            <td align="right">1,345</td>
            <td align="right">4,411</td>
            <td>Fort William to Loch Treig &amp; Loch Leven</td>
            <td>Highland</td>
            <td>NN166712</td>
        </tr>

        <tr>
            <td>Ben Macdui</td>
            <td align="right">1,309</td>
            <td align="right">4,295</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire/Moray</td>
            <td>NN988989</td>
        </tr>

        <tr>
            <td>Braeriach</td>
            <td align="right">1,296</td>
            <td align="right">4,252</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire/Highland</td>
            <td>NN953999</td>
        </tr>

        <tr>
            <td>Cairn Toul</td>
            <td align="right">1,291</td>
            <td align="right">4,236</td>
            <td>Cairngorms</td>
            <td>Aberdeenshire</td>
            <td>NN963972</td>
        </tr>
    </tbody>
</table>

Live example

Public and bank holidays (mygov.scot)

Back to top