---
title: Table Types
layout: nested-component.html
---
<h1 class="docs--page-header">Table Types</h1>

<div class="text-info docs--panel docs--panel-info">
    <p>
        You can mix the following tables styles together:
    </p>
    <ul class="no-bullet">
        <li>
            .table-striped
        </li>
        <li>
            .table-bordered
        </li>
        <li>
            .table-hover
        </li>
    </ul>
    <p>
        And you use either of the .condensed or .expanded (but not both) with any of the above styles.
    </p>
</div>

<h2 class="docs--section-header">
    Basic Table
</h2>

<table class="table">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Striped Table
</h2>

<table class="table table-striped">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Bordered Table
</h2>

<table class="table table-bordered">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Hover Rows
</h2>

<table class="table table-hover">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Condensed Tables
</h2>

<table class="table table-condensed">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
            <td>
                Birthday
            </td>
            <td>
                Status
            </td>
            <td>
                Last login
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
            <td>
                21/05/1980
            </td>
            <td>
                Active
            </td>
            <td>
                19/11/2014
            </td>
        </tr>
    </tbody>
</table>

<h2 class="docs--section-header">
    Expanded Tables
</h2>

<div class="text-danger docs--panel docs--panel-danger">
    <p>
        Watch out! Expanded tables includes <strong>a lot</strong> of whitespace. Dont put too many columns in these tables.
    </p>
</div>

<table class="table table-expanded">
    <thead>
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
            <td>
                Role
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Doe
            </td>
            <td>
                jd
            </td>
            <td>
                john.doe@company.com
            </td>
            <td>
                Administrator
            </td>
        </tr>
    </tbody>
</table>