Bootstrap Table

Introduction

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

Explanation

In Bootstrap version 2.0, the bootstrap.css file contains table styles from line 1034 to line 1167.

As you know, tables are used to display tabular data. Bootstrap follows the same principle, and the markup should be structured as follows:

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

Simple Table Example with 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

View Online

Try it »

Zebra Striped Table Example with Bootstrap

This table uses the zebra-striping CSS class, which is defined in the relevant bootstrap.css file, with the class name .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

View Online

View the above example in a different browser window.

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