Styles
Tables
Use a tables to display tabular data.
Contents
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.
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>Scrollable tables
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:
tabindex="0"- this will ensure the table can be focused on and then scrolled using a keyboardrole="region"- because users need to be able to focus on the table, this identifies it as a significant region of the pagearia-labelledby="[table caption id]"- this should be theidof the table's<caption>element which will describe the scrollable region
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.
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">"He died from pneumonoultramicroscopicsilicovolcanoconiosis"</td>
<td class="tna-table__cell">"a lung disease caused by inhalation of very fine silicate or quartz dust"</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">"Supercalifragilisticexpialidocious; even if the sound of it is something quite atrocious"</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">"I am very offended by my friend's floccinaucinihilipilification of my amazing new vocabulary"</td>
<td class="tna-table__cell">"the act or habit of assessing something as worthless"</td>
</tr>
</tbody>
</table>
</div>