Bootstrap Tables
Using Bootstrap you can create table in a simple way and different types of Bootstrap tables by using different classes.
Basic Table :
A basic Bootstrap table has a light padding and only horizontal dividers. add the base class .table to any <table>.
<!DOCTYPE html>
<html>
<head>
<title>Basic Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |
Bordered Table :
You can also add .table-bordered class for borders on all sides of the table and cells..
<!DOCTYPE html>
<html>
<head>
<title>Bordered Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |
Striped Table :
You can create table with alternate background like zebra-stripes by simply adding the Bootstrap's class .table-striped to the .table base class.
This is achieved by adding the background-color to the table row within <tbody> element via the :nth-child CSS selector (not supported in IE7-8).
<!DOCTYPE html>
<html>
<head>
<title>Striped Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |
Hover Rows :
Bootstrap .table-hover class adds a hover effect (grey background color) on table rows:
<!DOCTYPE html>
<html>
<head>
<title>Hover Rows</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |
Condensed table :
Add .table-condensed to make tables more compact by cutting cell padding in half.
<!DOCTYPE html>
<html>
<head>
<title>Condensed Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |
Contextual Classes :
The Contextual classes shown in following table will allow you to change the background color of your table rows or individual cells.
Class |
Description |
.active |
Applies the hover color to a particular row or cell |
.success |
Indicates a successful or positive action |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
<!DOCTYPE html>
<html>
<head>
<title>Contextual classes</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
Class |
Name |
Website |
Default |
Free Time Learn |
www.freetimelearn.com |
Active |
Free Time Learning |
www.freetimelearning.com |
Success |
Free Time Learn |
www.freetimelearn.com |
Info |
Free Time Learning |
www.freetimelearning.com |
Warning |
Free Time Learn |
www.freetimelearn.com |
Danger |
Free Time Learning |
www.freetimelearning.com |
Responsive Table :
The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-responsive">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</body>
</html>
Output :
S.No |
Name |
Website |
1 |
Free Time Learn |
www.freetimelearn.com |
2 |
Free Time Learning |
www.freetimelearning.com |
3 |
FreeTimeLearn |
www.freetimelearning.xyz |