Tables

The tables pattern is for displaying text-based content within tables.

Rules for tables

Tables must not be used for more than two columns.
If your content requires more than two columns use the DataTables pattern for more complex datasets as they offer a responsive solution.
Tables must include a table-striped class on the table element to add a background colour to alternate rows—this aids readability.
You must only use text-based content within tables.

Colour headings

You also have the option of other colours for the table header. Secondary and tertiary table headers are used on pages currently using the secondary and tertiary palette themes.

For further reference on colour palettes, see the colours page.

Default table heading

Example

Email address	Name
example@st-andrews.ac.uk	Tony Stark
example@st-andrews.ac.uk	Steven Rogers
example@st-andrews.ac.uk	Bruce Banner

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped">
    <thead>
        <tr>
            <th>Email address</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>example@st-andrews.ac.uk</td>
            <td>Tony Stark</td>
        </tr>
        <tr>
            <td>example@st-andrews.ac.uk</td>
            <td>Steven Rogers</td>
        </tr>
        <tr>
            <td>example@st-andrews.ac.uk</td>
            <td>Bruce Banner</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Primary table heading

Example

Class	Description
`.table-primary`	Primary palette colour, to be used on all pages using the primary palette theme.
`.table-secondary`	Secondary palette colour, to be used on all pages using the secondary palette theme.
`.table-tertiary-1`	First tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-2`	Second tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-3`	Third tertiary palette colour, to be used on all pages using the tertiary palette theme.

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped table-primary">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.table-primary</code></td>
            <td>Primary palette colour, to be used on all pages using the primary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-secondary</code></td>
            <td>Secondary palette colour, to be used on all pages using the secondary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-1</code></td>
            <td>First tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-2</code></td>
            <td>Second tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-3</code></td>
            <td>Third tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Secondary table heading

Example

Class	Description
`.table-primary`	Primary palette colour, to be used on all pages using the primary palette theme.
`.table-secondary`	Secondary palette colour, to be used on all pages using the secondary palette theme.
`.table-tertiary-1`	First tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-2`	Second tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-3`	Third tertiary palette colour, to be used on all pages using the tertiary palette theme.

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped table-secondary">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.table-primary</code></td>
            <td>Primary palette colour, to be used on all pages using the primary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-secondary</code></td>
            <td>Secondary palette colour, to be used on all pages using the secondary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-1</code></td>
            <td>First tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-2</code></td>
            <td>Second tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-3</code></td>
            <td>Third tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Tertiary 1 table heading

Example

Class	Description
`.table-primary`	Primary palette colour, to be used on all pages using the primary palette theme.
`.table-secondary`	Secondary palette colour, to be used on all pages using the secondary palette theme.
`.table-tertiary-1`	First tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-2`	Second tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-3`	Third tertiary palette colour, to be used on all pages using the tertiary palette theme.

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped table-tertiary-1">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.table-primary</code></td>
            <td>Primary palette colour, to be used on all pages using the primary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-secondary</code></td>
            <td>Secondary palette colour, to be used on all pages using the secondary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-1</code></td>
            <td>First tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-2</code></td>
            <td>Second tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-3</code></td>
            <td>Third tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Tertiary 2 table heading

Example

Class	Description
`.table-primary`	Primary palette colour, to be used on all pages using the primary palette theme.
`.table-secondary`	Secondary palette colour, to be used on all pages using the secondary palette theme.
`.table-tertiary-1`	First tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-2`	Second tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-3`	Third tertiary palette colour, to be used on all pages using the tertiary palette theme.

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped table-tertiary-2">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.table-primary</code></td>
            <td>Primary palette colour, to be used on all pages using the primary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-secondary</code></td>
            <td>Secondary palette colour, to be used on all pages using the secondary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-1</code></td>
            <td>First tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-2</code></td>
            <td>Second tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-3</code></td>
            <td>Third tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Tertiary 3 table heading

Example

Class	Description
`.table-primary`	Primary palette colour, to be used on all pages using the primary palette theme.
`.table-secondary`	Secondary palette colour, to be used on all pages using the secondary palette theme.
`.table-tertiary-1`	First tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-2`	Second tertiary palette colour, to be used on all pages using the tertiary palette theme.
`.table-tertiary-3`	Third tertiary palette colour, to be used on all pages using the tertiary palette theme.

Code

<!-- Begin pattern: tables //-->
<table class="table table-striped table-tertiary-3">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>.table-primary</code></td>
            <td>Primary palette colour, to be used on all pages using the primary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-secondary</code></td>
            <td>Secondary palette colour, to be used on all pages using the secondary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-1</code></td>
            <td>First tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-2</code></td>
            <td>Second tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
        <tr>
            <td><code>.table-tertiary-3</code></td>
            <td>Third tertiary palette colour, to be used on all pages using the tertiary palette theme.</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->

Key info table

See the Content halves pattern for this usage. It must not be used outwith that usage.

Example


SQA Highers	AAAB, including at least two of the following subjects: Mathematics Biology Chemistry Computing Science or equivalent Geography Geology Physics Psychology.
GCE A-Levels	AAA, including at least two of the following subjects: Mathematics Biology Chemistry Computing Science or equivalent Geography Geology Physics Psychology.
IB points	38

SQA Highers

AAAB, including at least two of the following subjects:

Mathematics
Biology
Chemistry
Computing Science or equivalent
Geography
Geology
Physics
Psychology.

GCE A-Levels

AAA, including at least two of the following subjects:

Mathematics
Biology
Chemistry
Computing Science or equivalent
Geography
Geology
Physics
Psychology.

IB points

Code

<!-- Begin pattern: tables //-->
<table class="table table-bordered">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>SQA Highers</td>
            <td><p>AAAB, including at least two of the following subjects:</p><ul><li>Mathematics</li><li>Biology</li><li>Chemistry</li><li>Computing Science or equivalent</li><li>Geography</li><li>Geology</li><li>Physics</li><li>Psychology.</li></ul></td>
        </tr>
        <tr>
            <td>GCE A-Levels</td>
            <td><p>AAA, including at least two of the following subjects:</p><ul><li>Mathematics</li><li>Biology</li><li>Chemistry</li><li>Computing Science or equivalent</li><li>Geography</li><li>Geology</li><li>Physics</li><li>Psychology.</li></ul></td>
        </tr>
        <tr>
            <td>IB points</td>
            <td>38</td>
        </tr>
    </tbody>
</table>
<!-- End pattern: tables //-->