This tutorial explains about different types of table structures available in Bootstrap. As we know, tables are used to represent the data in the form of rows and columns. The Bootstrap framework enables us to create table by using .table class to <table> element. There are some of the table elements which we will use in bootstrap as follows:
- <table>: It is set of data values represents in a tabular format using vertical columns and horizontal rows.
- <thead>: It is used to define headings for table columns in a table.
- <tbody>: It is used to group body content in a table.
- <tr>: It is used to define row of cells in a table.
- <td>: It is used to define a cell which contains data.
- <th>: It is used to define a header cell in a table.
- <caption>: It describes nature or title of what the table holds and it is always first descendent of a <table>.
Also read:
Example of Simple Table
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Table Example</h2>
<table class="table">
<caption>Top five cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr>
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Striped Rows Table
We can make background of table like zebra strips by simply using .table-striped class to the <.table> base class.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows Table Example</h2>
<table class="table table-striped">
<caption>Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr>
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Bordered Table
If we want to make border surrounding every element in a table, then we could make use of .table-bordered class to the <.table> base class.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table Example</h2>
<table class="table table-bordered">
<caption>Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr>
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Hover Rows Table
We can also make table with mouse hover styled in Bootstrap by using .table-hover class to the <.table> base class.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows Table Example</h2>
<table class="table table-hover">
<caption>Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr>
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Condensed Table
We could make table more compact and save the space by using the class .table-condensed class to the <.table> base class. It makes table more compact by cutting the cell padding in half.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Condensed Table Example</h2>
<table class="table table-condensed">
<caption>Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr>
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Contextual Classes
Bootstrap provides some contextual classes to emphasize the cells in the table with some light weight styles by using following classes:
- .active: It provides hover color to a particular cell when we keep mouse on the particular cell.
- .success: It defines when the successful action happens on a cell.
- .warning: It indicates warning that needs to pay the attention.
- .danger: It defines when there may be an error or dangerous action.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes Example</h2>
<table class="table table-condensed">
<caption>Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr class="active">
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr class="success">
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr class="warning">
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</body>
</html>
Example of Responsive Table
Responsive table allows enabling horizontal scrolling on small devices which contains width below 768px. To make horizontal scroll, we wrap .table in .table-responsive class. However viewing on larger devices (more than 7698px) will not make much difference.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Responsive Table Example</h2>
<div class="table-responsive">
<table class="table table-bordered">
<caption class="text-success">Top Five Cities in India</caption>
<thead>
<tr>
<th>Position</th>
<th>City Name</th>
</tr>
</thread>
<tbody>
<tr class="active">
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>2</td>
<td>Delhi</td>
</tr class="success">
<tr>
<td>3</td>
<td>Bangalore</td>
</tr>
<tr class="warning">
<td>4</td>
<td>Hyderabad</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Ahmedabad</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bootstrap Typography