Overview

Tables display sets of data across rows and columns.


Types

1) Default Table

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>

2) 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>

3) 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

When to use

Tables should be used for:
  • Displaying tabular information such as statistics.
  • Making comparisons between information.
Tables should not be used for:
  • Displaying non-tabular data (Using lists would be more appropriate).
  • Laying out a page.
  • Large sections within a page.

Feedback

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

Chat with the team