Twitter Bootstrap Tables tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will learn how to use Twitter Bootstrap toolkit to create Tables.

Explanation

From line number 1034 to 1167 of bootstrap.css of Twitter Bootstarp Version 2.0 contains styles for Tables.

As you know, tables should be used for presenting tabular data only. And Twitter Bootstrap says rightly, the placement of markup must be like following :

If you are using column headers, then the hierarchy should be following :

Example of a simple Table with Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of Table with twitter bootstrap</title> 
<meta name="description" content="Creating a table with Twitter Bootstrap. Learn how to use Twitter Bootstrap toolkit to create Tables with examples.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<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>
</body>
</html>

Output

View Online

View the above example in a different browser window.

Example of a Zebra Table with Twitter Bootstrap

This table uses zebra-striped CSS class defined in the associated bootstrap css file. The class is .table-striped.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of Zebra Table with twitter bootstrap</title> 
<meta name="description" content="Creating a Zebra table with Twitter Bootstrap. Learn with example of a Zebra Table with Twitter Bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<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>
</body>
</html>

Output

View Online

View the above example in a different browser window

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Glyphicons with Twitter Bootstrap 3
Next: Twitter Bootstrap Forms tutorial