...

Tables

Tables present tabular information in a two-dimensional format. By default, Bootstrap's table styling is slightly more minimal than what Material Design specifies, but builds to offer more options than what is in Material's specifications. For this reason, we start with Bootstrap's default table, style it to fit Material Design's guidelines, and build on additional, optional classes from the default state.

Material Admin Pro also provides an interactive data tables plugin in addition to the table content styling on this page.

Default Table

Bootstrap's default table has been modified to match Material's table styling. The font size has been brought down in size, with the text color being made intentionally darker for higher contrast and greater legibility.

The below is an example of the default table. Material's base styling for tables, which features hoverable rows and borders surrounding the table, are shown in the examples after this one.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Bordered Table

By adding the .table-bordered class to the table element, the Bootstrap table design is one step closer Material's default design.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Hoverable Rows

By adding the .table-hover class to the table element in conjunction with the .table-bordered class, the table design now matches the Material Design default.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Striped Rows

By adding the .table-striped class to the table element, every other row will feature a slightly darker background color. This feature is outside of Materail Design's specifications, but can enhance the readability of a table, especially when working with large data sets.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover.table-striped
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Small Table

By adding the .table-sm class to the table element, the padding of each table cell is decresed. This table format is especially useful for considerably large data sets.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover table-striped table-sm">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover.table-striped.table-sm
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Dark Table

By adding the .table-dark class to the table element, the table will take on an inverse color system with a dark background and light text.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover table-striped table-dark">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover.table-striped.table-dark
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Adding Color

Color can be added to the entire table by using a table background class. These classes are named using the format .table-{color} where color is any color defined on the color map.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover table-primary">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover.table-primary
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Color can be added to a single row as well, also using the same .table-{color} classes.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="table-primary">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr.table-primary
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td(colspan='2') Larry the Bird
            td @twitter

Color can also be applied to a single cell using the table color classes.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td class="table-primary" colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover.mb-0
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr
            th(scope='row') 3
            td.table-primary(colspan='2') Larry the Bird
            td @twitter

The table specific background classes are used to change the color of entire tables, rows, or individual cells. The classes are named using the format .table-{color} where color is any color defined within the color map.

The color options for tables are compatible with the hover, striped, and other table states.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
2 Jacob Thornton @fat
2 Jacob Thornton @fat
2 Jacob Thornton @fat
2 Jacob Thornton @fat
2 Jacob Thornton @fat
2 Jacob Thornton @fat 
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="table-secondary">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-success">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-danger">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-warning">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-info">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-light">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="table-dark">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
    </tbody>
</table>
table.table.table-bordered.table-hover
    thead
        tr
            th(scope='col') #
            th(scope='col') First
            th(scope='col') Last
            th(scope='col') Handle
    tbody
        tr.table-primary
            th(scope='row') 1
            td Mark
            td Otto
            td @mdo
        tr.table-secondary
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-success
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-danger
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-warning
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-info
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-light
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat
        tr.table-dark
            th(scope='row') 2
            td Jacob
            td Thornton
            td @fat

Related Links

Data Tables Plugin

Material Admin Pro Data Tables Plugin

Related Link arrow_upward
Contents
Theme Customizer*
Change the theme type!
Try a pre-built swatch!
Or choose your own colors...
Need ideas? Randomize!
Finished? Export your color palette file with install instructions!
* Note: This customizer web component is an online-only tool and is not part of the download package when purchasing the theme.