Go back to Examples

Table

Basics - Beginner

The table element comes with default classes that can be extended to easily create great looking tables. These include classes such as `table-hover` for hover effect on rows and `table-sm` to reduce the padding and text size.

                <table class="table table-hover table-sm">
    <thead>
        <tr>
            <th>Wrestler</th>
            <th>Origin</th>
            <th>Finisher</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bret "The Hitman" Hart</td>
            <td>Calgary, AB</td>
            <td>Sharpshooter</td>
        </tr>
        <tr>
            <td>Stone Cold Steve Austin</td>
            <td>Austin, TX</td>
            <td>Stone Cold Stunner</td>
        </tr>
        <tr>
            <td>Randy Savage</td>
            <td>Sarasota, FL</td>
            <td>Elbow Drop</td>
        </tr>
        <tr>
            <td>Vader</td>
            <td>Boulder, CO</td>
            <td>Vader Bomb</td>
        </tr>
        <tr>
            <td>Razor Ramon</td>
            <td>Chuluota, FL</td>
            <td>Razor's Edge</td>
        </tr>
    </tbody>
</table>
Form Bind text field