Table

Back to components

Numeric tabular data

When comparing rows of numbers, align numbers to the right in table cells.

Example

Council tax bands for properties in Leeds

Council tax bands for properties in Leeds
Band	Annual council tax charge
A (reduced rate for disability discount)	£826.69
A	£992.03
B	£1,157.37
C	£1,322.71
D	£1,488.05
E	£1,818.72
F	£2,149.40
G	£2,480.07
H	£2,976.09

HTML Snippet for Numeric tabular data

<h2>Council tax bands for properties in Leeds</h2>
<div class="table-responsive">
    <table>
        <caption class="sr-only">Council tax bands for properties in Leeds</caption>
        <thead>
            <tr>
                <th scope="col">Band</th>
                <th class="numeric" scope="col">Annual council tax charge</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A <span class="font-xsmall">(reduced rate for <a href="#">disability discount</a>)</span></td>
                <td class="numeric">£826.69</td>
            </tr>
            <tr>
                <td>A</td>
                <td class="numeric">£992.03</td>
            </tr>
            <tr>
                <td>B</td>
                <td class="numeric">£1,157.37</td>
            </tr>
            <tr>
                <td>C</td>
                <td class="numeric">£1,322.71</td>
            </tr>
            <tr>
                <td>D</td>
                <td class="numeric">£1,488.05</td>
            </tr>
            <tr>
                <td>E</td>
                <td class="numeric">£1,818.72</td>
            </tr>
            <tr>
                <td>F</td>
                <td class="numeric">£2,149.40</td>
            </tr>
            <tr>
                <td>G</td>
                <td class="numeric">£2,480.07</td>
            </tr>
            <tr>
                <td>H</td>
                <td class="numeric">£2,976.09</td>
            </tr>
        </tbody>
    </table>
</div>

Data in a table

Not all content in tables should be right aligned.

Example

Important dates for primary school applications

Important dates for primary school applications
Date	Stage
1 November 2017 to 15 January 2018	Apply for a place
16 April 2018	Offers go out
30 April 2018	Waiting list deadline
16 May 2018	Deadline for accepting offers and appeals
April to July 2018	Places allocated from the waiting lists and appeals held
September 2018	Start primary school

HTML Snippet for data table

<h2>Important dates for primary school applications</h2>
<div class="table-responsive">
    <table>
        <caption class="sr-only">Important dates for primary school applications</caption>
        <thead>
            <tr>
                <th scope="col">Date</th>
                <th scope="col">Stage</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1 November 2017 to 15 January 2018</td>
                <td>Apply for a place</td>
            </tr>
            <tr>
                <td>16 April 2018</td>
                <td>Offers go out</td>
            </tr>
            <tr>
                <td>30 April 2018</td>
                <td>Waiting list deadline</td>
            </tr>
            <tr>
                <td>16 May 2018</td>
                <td>Deadline for accepting offers and appeals</td>
            </tr>
            <tr>
                <td>April to July 2018</td>
                <td>Places allocated from the waiting lists and appeals held<br/></td>
            </tr>
            <tr>
                <td>September 2018</td>
                <td>Start primary school</td>
            </tr>
        </tbody>
    </table>
</div>

Accessibility: tables

Making an accessible table isn’t hard and can be broken down into two main things.

add a table caption
mark row and column headings using the ‘scope’ attribute