Table

Overview

You should use the table component when you want to display tabular information such as statistics or if you want users to compare information.

Header Field A Header Field B
Data 1A Data 1B
Data 2A Data 2B
Data 3A Data 3B

You only need to attach a single table CSS class within the table tag.

<table class="table">
    <thead>
        <tr>
            <th>Header Field A</th>
            <th>Header Field B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1A</td>
            <td>Data 1B</td>
        </tr>
        <tr>
            <td>Data 2A</td>
            <td>Data 2B</td>
        </tr>
        <tr>
            <td>Data 3A</td>
            <td>Data 3B</td>
        </tr>
    </tbody>
</table>

When you should use this component

You should use the table component when you want to display tabular information such as statistics or if you want users to compare information.

When you should consider something else

When displaying non-tabular data, consider using lists instead.

A table should never be used to layout a page or be used in large sections within a page.


Horizontal Table

You can use this table without the emphasis of a table header. Just add the .table-h class

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
<!--Add class name table-h for horizontal tables-->
<table class="table table-h">
    <tbody>
        <tr>
            <th>Lorem ipsum dolor.</td>
            <th>Lorem ipsum dolor.</td>
            <th>Lorem ipsum dolor.</td>
            <th>Lorem ipsum dolor.</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
            <td>Lorem ipsum dolor.</td>
        </tr>
    </tbody>
</table>

Vertical Header Table

You can use this table with left header header. Just add the .table-v class.

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
<!--Add class name table-v for horizontal tables-->
<table class="table table-v">
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
</table>

Style

Modifier Description
is-bordered Use when you want to add borders to all the cells
is-striped Use when you want to add stripes to all the cells
is-narrow Use when you want to make the cells narrower
is-hoverable Use when you want to add hover effect on each row
is-fullwidth Use when you want to have a fullwidth table

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team