Home »
Web programming »
Bootstrap
Create tables using Bootstrap
In this tutorial, we are going to learn how to create different types of tables using different classes in Bootstrap?
Submitted by Bharti Parmar, on October 31, 2018
In the previous article, we have learnt about typography, its different classes and how it works. Now, in this article, we’ll see what the different classes are and how to use them to create a table.
About Bootstrap Table
Bootstrap has few table classes that help in building reliably styled and receptive tables. By default, Bootstrap table has a light padding and horizontal dividers. So, If you want to make a simple table with informally padded cells and horizontal dividers, apply Bootstrap table class to the .table element. Add the base class .table and spread with some traditional styles or use more dissimilar classes.
Bootstrap tables deliver extra profits like receptiveness and the prospect of working on the styles of the tables. You can style your table by adding buttons, checkboxes, panels, and many other extra elements.
Striped Rows:
However keeping the .table class, add bootstrap .table-striped class for irregular background colors on the rows; which adds zebra stripes to any table row within the .tbody class.
Bordered Table:
However keeping .table class, add .table-bordered class for borders on all sides of the table and cells.
Hover Rows:
However keeping the .table class in place, add .table-hover class to allow a hover result within a <tbody>; where you attain grey background color, when mouse points above the table rows.
Black / Dark Table
.table-dark class adds a black background to the table. You can use this class to reverse the colors so that it has bright text on a black background.
Dark Striped Table:
Combine the two classes .table-dark and .table-striped class to create a dark, striped table.
Hoverable Dark Table:
Combine .table-hover and .table-dark class to create dark and a hover result (grey background color) on table rows.
Borderless Table
Use .table-borderless class for a table without borders. This class take away borders from the table.
Contextual Classes
Contextual classes can be used to color the entire table, table rows or table cells. You can put on color to distinct rows or cells by using Bootstrap's relative classes. The 6 appropriate classes are available. viz .table-active, .table-primary, .table-info, .table-danger, .table-success, .table-warning.
Captions:
It’s like a title on behalf of a table which helps users with screen readers to find a table and recognize what it’s about and choose if they want to read it.
Table Head Colors:
You can add background color to the header by using .thead-default, .thead-inverse, .thead-dark class ( it adds a black background to table headers and to deliver a proper modification); while, .thead-light class adds a grey background to table headers.
Small and condensed table:
While keeping .table class in place, you can use .table-sm class to make tables more solid by cutting cell padding in half.
Responsive Tables
.table-responsive class {-sm|-md|-lg|-xl} creates a responsive table. Responsive tables habitually create horizontal scrollbars when seen on devices smaller than a given breakpoint. This horizontal scrollbar is added to the table on screens that are less than 992px wide. When inspecting on anything larger than 992px wide, you will not see any difference in these tables.
To create a responsive table, mount the table in a .div element that has the .table-responsive-*(.table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl) class applied. From that breakpoint and up, the table will act usually; without scrolling horizontally.
Note: The .table-responsive class is equivalent to .table-responsive-md.
Example code (HTML)
bootstrap_practice.html
<!doctype html>
<html lang="en">
<head>
<title> Page Title </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="F:\WEB DESIGN\bootstrap\bootstrap-4.1.3-dist\css\bootstrap.min.css">
<script src="F:\WEB DESIGN\bootstrap\bootstrap-4.1.3-dist\js\bootstrap.bundle.min.js">
</script>
</head>
<body>
<!------------- striped table ------------------->
<table class="table table-striped">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Contact</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arti</td>
<td>Parmar</td>
<td>arti@parmar.com</td>
</tr>
<tr>
<td>Mayank</td>
<td>Parmar</td>
<td>mayank@parmar.com</td>
</tr>
<tr>
<td>kartik</td>
<td>aryan</td>
<td>kartik@aryan.com</td>
</tr>
</tbody>
</table>
<!------------- bordered table ------------------->
<table class="table">
<thead class="thead-light">
<tr>
<th>1) Header</th>
<th>2) Header</th>
<th>3) Header</th>
</tr>
</thead>
<tfoot>
<tr>
<th>1) Footer</th>
<th>2) Footer</th>
<th>3) Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>kartik</td>
<td>kriti</td>
<td>varun</td>
</tr>
<tr>
<td>singh</td>
<td>anand</td>
<td>biswas</td>
</tr>
</tbody>
</table>
<!------------------hover in table -------------->
<table class="table table-hover">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>anjali</td>
<td>sharma</td>
<td>4763578234</td>
</tr>
<tr>
<td>abhishek</td>
<td>Anand</td>
<td>4878223847</td>
</tr>
<tr>
<td>shradha</td>
<td>kapoor</td>
<td>2847803284</td>
</tr>
</tbody>
</table>
<!------------------- black and dark table ---------------->
<table class="table table-dark">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>shivani</td>
<td>rajpoot</td>
<td>shivani@rajpoot.com</td>
</tr>
<tr>
<td>supriya</td>
<td>rajput</td>
<td>supriya@rajput.com</td>
</tr>
<tr>
<td>shivani</td>
<td>yadav</td>
<td>shivani@yadav.com</td>
</tr>
</tbody>
</table>
<!------------------ dark striped table-------------------->
<table class="table table-dark table-striped">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Murga</td>
<td>Om</td>
<td>374845943859</td>
</tr>
<tr>
<td>Murgi</td>
<td>bottle</td>
<td>387545934</td>
</tr>
<tr>
<td>Hero</td>
<td>Alom</td>
<td>34753975294</td>
</tr>
</tbody>
</table>
<!------------ dark hoverable table ------------------->
<table class="table table-dark table-hover">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Topper</td>
<td>Murga</td>
<td>topper@murga.com</td>
</tr>
<tr>
<td>Topper's</td>
<td>Girl</td>
<td>Toppers@girl.com</td>
</tr>
<tr>
<td>Hacker</td>
<td>Alom</td>
<td>Hacker@alom.com</td>
</tr>
</tbody>
</table>
<!---------------borderless table ----------->
<table class="table table-borderless">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Atul</td>
<td>Anand</td>
<td>atul@anand.com</td>
</tr>
<tr>
<td>Bharti</td>
<td>Parmar</td>
<td>bharti@parmar.com</td>
</tr>
<tr>
<td>Partha</td>
<td>Biswas</td>
<td>partha@biswas.com</td>
</tr>
</tbody>
</table>
<!----------------table using contextual class ----------------->
<table class="table">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>Topper</td>
<td>3857845096</td>
</tr>
<tr class="table-primary">
<td>Hi</td>
<td>Murge</td>
<td>3847595934096</td>
</tr>
<tr class="table-success">
<td>Hlo</td>
<td>shivani</td>
<td>34673599045</td>
</tr>
<tr class="table-danger">
<td>Hye</td>
<td>Alom</td>
<td>2346598495</td>
</tr>
<tr class="table-info">
<td>Hey</td>
<td>Murgi</td>
<td>3489594059</td>
</tr>
<tr class="table-warning">
<td>Hello</td>
<td>supriya</td>
<td>3758759045</td>
</tr>
<tr class="table-active">
<td>Hi</td>
<td>Atul</td>
<td>384783459</td>
</tr>
<tr class="table-secondary">
<td>Hlo</td>
<td>kartik</td>
<td>3548596996</td>
</tr>
<tr class="table-light">
<td>Hye</td>
<td>Bharti</td>
<td>38758475984</td>
</tr>
<tr class="table-dark text-dark">
<td>Hey</td>
<td>shradha</td>
<td>3587859</td>
</tr>
</tbody>
</table>
<!------------------ table using caption ----------------->
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">First</th>
<th scope="col">Middle</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mr.</td>
<td>Atul</td>
<td>Agnihotri</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mrs.</td>
<td>Bharti</td>
<td>Anand</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Hacker</td>
<td>Alom</td>
<td>Hero</td>
</tr>
</tbody>
</table>
<!--------------------- table with table head ------------->
<table class="table">
<thead class="thead-dark">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Atul</td>
<td>Bharti</td>
<td>38448594</td>
</tr>
<tr>
<td>Murga</td>
<td>Murgi</td>
<td>385774584</td>
</tr>
<tr>
<td>Topper</td>
<td>Topper's girl</td>
<td>32847858</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Partha</td>
<td>Bharti</td>
<td>3756485949</td>
</tr>
<tr>
<td>Takla</td>
<td>Mataji</td>
<td>384784589</td>
</tr>
<tr>
<td>Hacker</td>
<td>Shanti</td>
<td>385845984</td>
</tr>
</tbody>
</table>
<!-------------small and condensed table ---------------->
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Atul</td>
<td>Anand</td>
<td>atul@anand.com</td>
</tr>
<tr>
<td>Partha</td>
<td>Biswas</td>
<td>partha@biswas.com</td>
</tr>
<tr>
<td>Bharti</td>
<td>Parmar</td>
<td>bharti@parmar.com</td>
</tr>
</tbody>
</table>
<!---------------responsive table -------------->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Contact</th>
<th>City</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Murga</td>
<td>Murgi</td>
<td>35346758</td>
<td>bihar</td>
<td>murga@murgi.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
bootstrap_practice.html
Output
Mobile view
Tablet view
Desktop view
Conclusion:
In this article we have discussed about How to create different type of responsive table by using several useful "table" classes. We used all the types of different classes to create a table with examples. I hope now, you all understand these concepts; how to use these classes and how to create different types of responsive tables. We will learn more about furthermore classes. Stay tuned for the next article. See you in the next article! Happy Learning!