Tables

The tables pattern is for displaying data.

MUST not be used for more than two columns. Use the DataTables pattern for more complex datasets.
The rows should alternate colour to increase readability.
You MUST only use text-based content within tables.

Options available

Default
Colour headings

Default

Email Address	Name
abc@domain.com	Bob McBoberson
def@domain.com	Pat McPaterson
ghi@domain.com	Jo McJoerson

Code

<!-- Begin pattern: tables //-->

<table class="table table-striped ">
    <thead>
        <tr>
            <th>Email Address</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc@domain.com</td>
            <td>Bob McBoberson</td>
        </tr>
        <tr>
            <td>def@domain.com</td>
            <td>Pat McPaterson</td>
        </tr>
        <tr>
            <td>ghi@domain.com</td>
            <td>Jo McJoerson</td>
        </tr>
    </tbody>

</table>

<!-- End pattern: tables //-->

Colour headings

You also have the option of these other colours for the table header, see the colours page for palettes.

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 //-->