Tables

Tables can be used to organize and display data.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Easily change the look of your tables to better fit your data.

Narrow the cell height using the `.narrow`

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table class="narrow">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Stripe every other row using the `.striped` class.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table class="striped">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Add a border around each cell using the `.bordered` class.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table class="bordered">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Enable row highlighting on the `tbody` on mouseover using the `.hoverable` class.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table class="hoverable">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Let your table expand as much as possible by wrapping your table in a `div` with the `.full-width-table` class.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<div class="full-width-table">
    <table>
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
    </table>
</div>

Mix and match the `.narrow`, `.striped`, `.bordered`, `.hoverable`, and `.full-width-table` classes to create the perfect table.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<div class="full-width-table">
    <table class="hoverable narrow striped bordered">
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
    </table>
</div>

Easily vertically align the content within a table cell.

Table Caption
Table Header	Table Header	Table Header	Table Header
	Top	Middle	Bottom

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="bg-light" style="height: 100px;"></td>
            <td class="vertical-align-top">Top</td>
            <td class="vertical-align-middle">Middle</td>
            <td class="vertical-align-bottom">Bottom</td>
        </tr>
    </tbody>
</table>

Change the color of your tables using boba's vibrant color palette.

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<table class="striped hoverable orange">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th>Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
        <tr>
            <td>Table Row</td>
            <td>Table Row</td>
            <td>Table Row</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
</table>

Table Caption
Table Header	Table Header	Table Header
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Row	Table Row	Table Row
Table Footer	Table Footer	Table Footer

<div class="full-width-table">
    <table class="narrow striped green">
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
            <tr>
                <td>Table Row</td>
                <td>Table Row</td>
                <td>Table Row</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
    </table>
</div">

Components

Learn how to build your website with boba!

Tables can be used to organize and display data.

Styles

Easily change the look of your tables to better fit your data.

Narrow

Narrow the cell height using the `.narrow`

Striped

Stripe every other row using the `.striped` class.

Bordered

Add a border around each cell using the `.bordered` class.

Hoverable

Enable row highlighting on the `tbody` on mouseover using the `.hoverable` class.

Full Width

Let your table expand as much as possible by wrapping your table in a `div` with the `.full-width-table` class.

Combinations

Mix and match the `.narrow`, `.striped`, `.bordered`, `.hoverable`, and `.full-width-table` classes to create the perfect table.

Vertical Alignment

Easily vertically align the content within a table cell.

Colors

Change the color of your tables using boba's vibrant color palette.

Components

Learn how to build your website with boba!

Tables

Tables can be used to organize and display data.

Styles

Easily change the look of your tables to better fit your data.

Narrow

Narrow the cell height using the .narrow

Striped

Stripe every other row using the .striped class.

Bordered

Add a border around each cell using the .bordered class.

Hoverable

Enable row highlighting on the tbody on mouseover using the .hoverable class.

Full Width

Let your table expand as much as possible by wrapping your table in a div with the .full-width-table class.

Combinations

Mix and match the .narrow, .striped, .bordered, .hoverable, and .full-width-table classes to create the perfect table.

Vertical Alignment

Easily vertically align the content within a table cell.

Colors

Change the color of your tables using boba's vibrant color palette.

Narrow the cell height using the `.narrow`

Stripe every other row using the `.striped` class.

Add a border around each cell using the `.bordered` class.

Enable row highlighting on the `tbody` on mouseover using the `.hoverable` class.

Let your table expand as much as possible by wrapping your table in a `div` with the `.full-width-table` class.

Mix and match the `.narrow`, `.striped`, `.bordered`, `.hoverable`, and `.full-width-table` classes to create the perfect table.