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 table wrappers

Do not use tables to lay out or organise content.

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__header">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__header"></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__header">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__header"></td>
    </tr>
  </tfoot>
</table>

Scrollable table wrappers

Wrap the table in a <div class="tna-table-wrapper"> element to achieve scrolling when a wide table is used within in a column.

Open this example in new tab

HTML 

<div class="tna-container">
  <div class="tna-column tna-column--full tna-!--padding-vertical-s">
    <div class="tna-table-wrapper">
      <table class="tna-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__header">&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__header"></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__header">&quot;the act or habit of assessing something as worthless&quot;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Back to top