Web Style Guide: Tables

HTML: Tables

When you have tabular data to present, only a table will do. :) We have several table formatting options to choose from.

Table: Default

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table>
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Table Divider

CSS Classes: table-divider

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-divider">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Table Border + Divider

CSS Classes: table-border table-divider

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-border table-divider">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Table Striped

CSS Classes: table-striped

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-striped">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Table Hover

CSS Classes: table-hover

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-hover">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Table Small

CSS Classes: table-small

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-small">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table: Responsive Overflow Wrapper

CSS Classes: table-overflow

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

<div class="table-overflow">
    <table class="table-border table-divider">
        <thead>
            <tr>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
    </table>
</div>