Table

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

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top