Tables

Tables have some "baggage" from the olden days when folks used them for layout. You know where they really shine? When it's time to show tabular data.

Modifier ClassesModifiesDescription
.table--border.tableAdd a border to the table
.table--striped.tableAdd odd/even background highlighting to table

Contents

Default
Your standard no-frills table.
Header Header Header Header
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
HTMLCopy HTML
<table class="table">
<thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
</tbody>
</table>
Striped
Add alternate zebra-striping to your table by adding the .table--striped class to the table tag.
Header Header Header Header
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
HTMLCopy HTML
<table class="table table--striped">
<thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
</tbody>
</table>
Border
Add a border with the .table--border class to frame your table.
Header Header Header Header
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
Cell with big data Cell with medium data. Cell with small data. Cell out.
HTMLCopy HTML
<table class="table table--border">
<thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
    <tr>
        <td>Cell with big data</td>
        <td>Cell with medium data.</td>
        <td>Cell with small data.</td>
        <td>Cell out.</td>
    </tr>
</tbody>
</table>
Powered by Jack v0.0.32