Bootstrap For Beginners - Part Five (Bootstrap Tables)

I have started an article series on Bootstrap and published four articles so far. Read the previous four parts here.

Introduction

In this article we will learn about Bootstrap Tables. Using Bootstrap classes we can improve the appearance of the table. In this article we will create different tables with different layouts.

Supported Table Elements

The following table elements are used with Bootstrap:

<table>: It is used for wrapping element for displaying data in a tabular format
<thead>: It is used for container element for table header rows (<tr>) to label table columns.
<tbody>: It is used for container element for table rows (<tr>) in the body of the table.
<tr>: It is used for container element for a set of table cells (<td> or <th>) that appears on a single row.
<th>: Special table cell for column (or row) labels. it must be used within a <thead>
<td>: It is used for default table cell.
<caption>: It is used for description or summary of what the table holds.

Bootstrap Basic Table

We can create a basic Bootstrap table with basic styling that has a small cell padding and only horizontal dividers by adding Bootstrap class ".table" to the <table> element.

Example 1 : Bootstrap Basic Table using .table class.

In this example we will create a simple table with Bootstrap class and using html table elements we will create a employee table with Fields Sr. No., Employee Name, Email, City by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Basic Table</h1>
<table class="table">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>[email protected] </td>
<td>Chittorgarh</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>[email protected] </td>
<td>Banglore</td>
</tr>
<tr>
<td>3</td>
<td>Shobhna Singvi</td>
<td>[email protected]</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Basic Table Layout

Table with Striped Rows

By using .table-striped class with .table base class, we can get zebra-stripes on rows to a table within <tbody>.

Example 2 : Table with Striped Rows Using .table-striped class

In this example we will create table same as Example1. In this we will create table with Striped Rows by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Table With Striped Rows</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>[email protected] </td>
<td>Chittorgarh</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>[email protected] </td>
<td>Banglore</td>
</tr>
<tr>
<td>3</td>
<td>Shobhna Singvi</td>
<td>[email protected]</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Striped Table Layout

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells.

Example 3: Table with Borders on All Sides Using .table-bordered class

In this example we will creat a table same as Example 1, 2. In this we will create a table with borders on all sides of the table and cells by using .table-bordered class with .table base class by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Bordered Table</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>[email protected] </td>
<td>Chittorgarh</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>[email protected] </td>
<td>Banglore</td>
</tr>
<tr>
<td>3</td>
<td>Shobhna Singvi</td>
<td>[email protected]</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Bordered Table Layout

Hover Rows

By using Bootstrap's class .table-hover with the .table base class, we can enable a hover state on table rows within a <tbody> element.

Example 4 : Hover Rows on table Using .table-hover class

In this example we will create atable same as Example 1, 2, 3. For this we will create table by using .table-hover class, a light gray background will be added to rows when we mouse over, by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Table With Hover Rows State</h1>
<table class="table table-hover">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>[email protected] </td>
<td>Chittorgarh</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>[email protected] </td>
<td>Banglore</td>
</tr>
<tr>
<td>3</td>
<td>Shobhna Singvi</td>
<td>[email protected]</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Hover Table Layout

Condensed Table

By using the .table-condensed class we can make a table more compact by cutting cell padding in half.

Example 5 : Condensed or Compact Table Using .table-condensed class

In this example we will create table same as Example 1, 2, 3, 4. For this we will create table by using .table-condensed class, with .table base class by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Condensed Table</h1>
<table class="table table-condensed">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>[email protected] </td>
<td>Chittorgarh</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>[email protected] </td>
<td>Banglore</td>
</tr>
<tr>
<td>3</td>
<td>Shobhna Singvi</td>
<td>[email protected]</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Condensed Table Layout

Contextual Classes

Some Contextual classes can be used to change the background color of table rows (<tr>) or table cells (<td>). The Contextual classes are following,These classes can be applied to <tr>, <td> or <th>.

.active: It is used to apply the hover color to the table row or table cell
.info: It is used to indicates a informative change or action
.success: It is used to indicates a successful or positive action
.danger: It is used to indicates a dangerous or negative action
.warning: It is used to indicates a warning

Example 6: Use Contextual Classes

In this example we will create table using .table base class, with above Contextual Classes on <tr> element for Coloring rows background like warning, success, danger, etc. by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Contextual Classes For Background Color</h1>
<table class="table">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Shaili Dashora</td>
<td>50,000</td>
<td>Banglore</td>
</tr>
<tr class="success">
<td>2</td>
<td>Sourabh Somani</td>
<td>1,20,000</td>
<td>Dehli</td>
</tr>
<tr class="info">
<td>3</td>
<td>Milan</td>
<td>40,000</td>
<td>Udaipur</td>
</tr>
<tr class="danger">
<td>4</td>
<td>KumKum</td>
<td>30,000</td>
<td>Banglore</td>
</tr>
<tr class="warning">
<td>5</td>
<td>Bhumika</td>
<td>20,000</td>
<td>Udaipur</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Contextual Table Layout

Creating Responsive Tables with Bootstrap

In Bootstrap 3 we can create a responsive table by using .table-responsive class. The table will scroll horizontally on small devices (screen width under 768px). When viewing on larger than 768px wide, we will not see any difference in tables.

Example 7 : Creating Responsive Table

In this example to mak the table responsive we will place the table inside a <div> element and then we will apply the class .table-responsive on it by using the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part5</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Responsive Table</h1>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Sr.No.</th>
<th>Emolpyee Name</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>50,000</td>
<td>Banglore</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>1,20,000</td>
<td>Dehli</td>
</tr>
<tr>
<td>3</td>
<td>Milan</td>
<td>40,000</td>
<td>Udaipur</td>
</tr>
<tr>
<td>4</td>
<td>KumKum</td>
<td>30,000</td>
<td>Banglore</td>
</tr>
<tr>
<td>5</td>
<td>Bhumika</td>
<td>20,000</td>
<td>Udaipur</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Responsive Table Layout

In this article we focused on Bootstrap Tables. Then in the next articles we will understand all the components of Bootstrap step by step.