Bootstrap Tables

Introduction

In this tutorial, you will learn how to use the Bootstrap toolkit to create tables.

Explanation

In Bootstrap version 2.0, lines 1034 to 1167 of bootstrap.css contain the table styles.

As you know, tables are used to present tabular data. Bootstrap is the same, and the markup should be placed as follows:

If you use column headings, the hierarchy should be as follows:

Simple Table Example for Bootstrap

Example

<table class="table">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

Output

output table with bootstrap

View Online

Striped Table Example for Bootstrap

This table uses the striped CSS class, which is defined in the related Bootstrap CSS file, and the class name is .table-striped.

Example

<table class="table table-striped">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

Output

output zebra stripped table with bootstrap

View Online

View the above example in different browser windows.

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.

Other Extensions