Skip to main content Skip to list of styles
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Styles

Tables

Use a tables to display tabular data.

Contents

  1. Scrollable tables

Do not use tables to lay out or organise content.

Ensure your tables have a <caption> element to describe the data in the table and make use of <thead>, <tbody> and <tfoot> elements.

Open this example in new tab

HTML

<table class="tna-table">
  <caption class="tna-table__caption">
    Records added and removed between 2020 and 2022
  </caption>
  <thead class="tna-table__head">
    <tr class="tna-table__row">
      <th class="tna-table__header">Year</th>
      <th class="tna-table__header tna-table__header--numeric">Records added</th>
      <th class="tna-table__header tna-table__header--numeric">Records removed</th>
      <th class="tna-table__header">Comments</th>
    </tr>
  </thead>
  <tbody class="tna-table__body">
    <tr class="tna-table__row">
      <th class="tna-table__header">2020</th>
      <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
      <td class="tna-table__cell tna-table__cell--numeric">789</td>
      <td class="tna-table__cell">Affected by COVID-19</td>
    </tr>
    <tr class="tna-table__row">
      <th class="tna-table__header">2021</th>
      <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
      <td class="tna-table__cell tna-table__cell--numeric">123</td>
      <td class="tna-table__cell"></td>
    </tr>
    <tr class="tna-table__row">
      <th class="tna-table__header">2022</th>
      <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
      <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
      <td class="tna-table__cell">World population reached eight billion</td>
    </tr>
  </tbody>
  <tfoot class="tna-table__foot">
    <tr class="tna-table__row">
      <th class="tna-table__header">Total</th>
      <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
      <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
      <td class="tna-table__cell"></td>
    </tr>
  </tfoot>
</table>

Wrap the table in a <div class="tna-table-wrapper"> element to achieve scrolling when a table is to wide to fit inside its container.

To ensure good accessibility, make sure to add some attributes to the wrapper element:

If JavaScript is available, the caption will be suffixed with (scroll to see more) only when the table is too wide for the screen to help screen readers.

Firefox users won't see shadows on the edges of the table unless JavaScript is available.

Open this example in new tab

HTML

<div class="tna-table-wrapper" tabindex="0" role="region" aria-labelledby="long-words-table-caption">
  <table class="tna-table">
    <caption id="long-words-table-caption" class="tna-table__caption">
      Some long words in the English language
    </caption>
    <thead class="tna-table__head">
      <tr class="tna-table__row">
        <th class="tna-table__header">Word</th>
        <th class="tna-table__header tna-table__header--numeric">Letters</th>
        <th class="tna-table__header">In context</th>
        <th class="tna-table__header">Definition</th>
      </tr>
    </thead>
    <tbody class="tna-table__body">
      <tr class="tna-table__row">
        <th class="tna-table__header">Pneumonoultramicroscopicsilicovolcanoconiosis</th>
        <td class="tna-table__cell tna-table__cell--numeric">45</td>
        <td class="tna-table__cell">&quot;He died from pneumonoultramicroscopicsilicovolcanoconiosis&quot;</td>
        <td class="tna-table__cell">&quot;a lung disease caused by inhalation of very fine silicate or quartz dust&quot;</td>
      </tr>
      <tr class="tna-table__row">
        <th class="tna-table__header">Supercalifragilisticexpialidocious</th>
        <td class="tna-table__cell tna-table__cell--numeric">34</td>
        <td class="tna-table__cell">&quot;Supercalifragilisticexpialidocious; even if the sound of it is something quite atrocious&quot;</td>
        <td class="tna-table__cell"></td>
      </tr>
      <tr class="tna-table__row">
        <th class="tna-table__header">Floccinaucinihilipilification</th>
        <td class="tna-table__cell tna-table__cell--numeric">29</td>
        <td class="tna-table__cell">&quot;I am very offended by my friend's floccinaucinihilipilification of my amazing new vocabulary&quot;</td>
        <td class="tna-table__cell">&quot;the act or habit of assessing something as worthless&quot;</td>
      </tr>
    </tbody>
  </table>
</div>

Back to top