Introduction To Bootstrap Tables

Table

Table is a structure that contains a set of rows and columns, used to store or show data.

Bootstrap Table Elements

Some of the table elements supported by bootstrap are given below.

<table>
This is used for wrapping elements for displaying data in a tabular format.

<thead>
This tag is a container element for table header rows to label table columns.

<tbody>
Container element for table rows in the body of the table.

<tr>
Container element for a set of table cells that appear on a single row.

<td>
Default table cell.

<th>
Special table cell for column or row depending on scope and placement labels. It must be used within a <thead>.

<caption>
Description of what the table holds.

Now, let's move ahead and take a look at different types of tables that can be used in bootstrap.

Bootstrap Basic Table

In bootstrap, basic tables can be defined by using .table class. This table has only horizontal dividers.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table in Bootstrap</h2>
<p>The .table class adds basic styling.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ankur</td>
<td>Soni</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Prashant</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Kartik</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output

Table with Striped Row

In bootstrap, we can use .table-striped class to add stripes to all rows in a particular table. Let us see with a basic example of striped row.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to all rows in a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ankur</td>
<td>soni</td>
<td>[email protected]</td>
</tr>
<tr>
<td>parshant</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Kartik</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output

Bordered Table

In bootstrap, we can use .table-bordered class which will give borders to all sides of the table. Below is the example of a bordered table.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dilip</td>
<td>vats</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Dinesh</td>
<td>Bhati</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amit</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output

Condensed Table

In bootstrap, we can make a table more compact by cutting the padding into half using .table-condensed class.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Condensed Table Example</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Root</td>
<td>[email protected]</td>
</tr>
<tr>
<td>David</td>
<td>Warner</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Kane</td>
<td>New</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output

Hover Rows in Table

We can also add the hover effect in a table by using .table-hover. This gives a hover effect to all rows by changing background color to gray.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class gives a hover effect on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Root</td>
<td>[email protected]</td>
</tr>
<tr>
<td>David</td>
<td>Warner</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Kane</td>
<td>New</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output

Responsive Tables

In bootstrap, we can create responsive tables by using .table-responsive. Responsive table scrolls down when open in a small screen but there will be no effect if we open it on a medium or big screen (more than 768 pixels).

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table.</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Clark</td>
<td>Male</td>
<td>30</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Output

Creating Tables using Contextual Class

In bootstrap, we can make tables by using contextual classes. It will color the table rows and table cell. Following classes can be used.

.active
.success
.warning
.danger
.info

Example

Let us take a look at the above contextual classes, used in a single example.

Output

In this article, we learned about different elements and different types of tables in Bootstrap. I hope you have enjoyed learning it.

6 Comments

Join the conversation! Your thoughts help the community grow.

Anu V9y ago
Thanks for sharing.. Nice article..
Abhishek Chandel9y ago
Nice share, will help a lot of newbies like me.
Joe Wilson9y ago
Well, thank you very much for sharing.
Vishal Prajapati9y ago
Very nice article..keep up the good work..
Vinodh Narayanan9y ago
Good one keep going friend
Manav Pandya9y ago
Thanks for sharing , thats what im looking for