Skip to main content Skip to list of styles
Beta

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

Styles

Tables

Use a tables to display tabular data.

Contents

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>

Back to top