< Bootstrap Tutorial

Bootstrap tables

← Previous Next →


Bootstrap Tables

The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a simple way.

The table elements supported by Bootstrap are shown in the following table:

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns.
<tbody> Container element for table rows (<tr>) in the body of the table.
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row.
<td> Default table cell.
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds.

We will get to know how to work with tables in Bootstrap by creating different kinds of tables. We will start by creating a Basic table using Bootstrap first.

Simple Table

We can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the <table> element.

Following code creates a simple table:

<table class="table">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

The table created will look like this:

Bordered Table

We can also add borders to the all table cells by adding an extra Bootstrap's class .table-bordered to the .table base class.

The following code will create a bordered table:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

The table created will look like this:

Condensed Table

We can also make our tables more compact and save the space through adding an extra class .table-condensed to the .table base class. The class .table-condensed makes the table compact by cutting the cell padding in half.

The following code will create a Compact or Condensed Table:

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

The table created will look like the following:

← Previous Next →