Tables

Beautiful Table responsive styles Documentation

Default Table Style

By default tables are styled with inner horizontal borders. Table headings and data are set at 13px. No additional classes necessary.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

Condensed Table Style

For large tables where tight spacing is required. Just add the class condensed

<table class="condensed">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

Bordered Table Style

Inner and outer borders. May be combined with condensed class. Just add the class bordered

<table class="bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

Stroped Table Style

Alternating row color style. May be combined with condensed and/or bordered classes. Just add the class striped

<table class="striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>