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. Use it 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. Use the scope attribute to say whether a header applies to a row or a column. This helps screen reader users.

Mobile behaviour

In general, mobile devices have room for three columns of data. 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, the 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. The data in the first column should be indicative of what the data in the column is about. In this example the first column has the name of the item being described in the row of data.

Pros:

  • easy to compare data between rows
  • the data is still displayed as a table

Cons:

  • requires 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 become individual blocks of data.

Pros:

  • provides an easily-digestable summary of the data

Cons:

  • difficult to compare data between rows
  • 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