Bootstrap Table
Tables are widely used while creating web pages. Tables are used for constructing calendars, for comparisons of any data, date pickers, etc. Bootstrap provides an easy way to create and modify Tables. Here we will learn to modify and edit table and table contents.
Creating a Table
To create a table add .table class to <table> tag. Add header elements using <th> tag. The <thead> tag denotes the head of the table. For adding contents use <td> tag. <tr> tag denotes the body of table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of table creation.
Example: Change Table Background
For changing the table background to dark with light text use .table-dark class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Output for inverted background table.
Table Head
Here we will discuss how we can style head using bootstrap class.
Use .thead-light or .thead-dark for changing the background color of the head.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table ">
<thead class= "table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output with the dark head background.
Striped Rows
We can add zebra striping to any row of the table using .table-striped within the <body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-striped ">
<thead class= "table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
The table in the output shows alternate color rows.
.
Bordered Table /Borderless Table
We can add borders to the table as well as cells. To add a border to the table and cells use .table-bordered. Let's see an example of adding a border to a table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-bordered ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of the above code.
Similarly for building a table without a border use .table-borderless class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-borderless ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of the borderless table.
Hoverable Rows
The hover effect appears when the user places the cursor on any row of a table. These effects can be added using .table-hover to <body> tag.
Let's demonstrate hover effects in a table using the following program.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-hover ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Here is the output illustrating the hover effects on the table.
Small Table
A table with smaller size rows can also be created using Bootstrap. To create a table with a smaller size use .table-sm class. Let us see an example of a small table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-sm ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
The result of the small table is given below.
Contextual classes
Users get bored just seeing black and white tables. Sometimes we need to add colors to the table. There are contextual classes in bootstrap to add colors to rows or cells of the table. .table-primary is one of the variants of contextual classes table. Other contextual colors will be shown through example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-sm ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
</tr>
</thead>
<tbody>
<tr class ="table-danger">
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
</tr>
<tr class = "table-primary">
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
</tr>
<tr class ="table-success">
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
<tr class ="table-warning">
<th scope="row">3</th>
<td>peter</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
</tr>
<tr class ="table-info">
<th scope="row">3</th>
<td>Sweeti</td>
<td>Bhopal</td>
<td>Madhya Pradesh</td>
</tr>
<tr class ="table-dark">
<th scope="row">3</th>
<td>Runu</td>
<td>Lucknow</td>
<td>Uttar Pradesh</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output demonstrating different colors used for the table.
Adding Buttons
We can add buttons to the table. Add <button> class within <td> to add buttons to table. Contextual buttons can also be added. Let's see an example of adding buttons to the table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table </h2>
<table class="table table-sm ">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">city</th>
<th scope="col">state</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class ="table-danger">
<th scope="row">1</th>
<td>Sita</td>
<td>Delhi</td>
<td>Delhi</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr class = "table-primary">
<th scope="row">2</th>
<td>Ronak</td>
<td>Kolkata</td>
<td>West Bengal</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr class ="table-success">
<th scope="row">3</th>
<td>Harry</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr class ="table-warning">
<th scope="row">3</th>
<td>peter</td>
<td>Hyderabad</td>
<td>Andhra Pradesh</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr class ="table-info">
<th scope="row">3</th>
<td>Sweeti</td>
<td>Bhopal</td>
<td>Madhya Pradesh</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<tr class ="table-dark">
<th scope="row">3</th>
<td>Runu</td>
<td>Lucknow</td>
<td>Uttar Pradesh</td>
<td>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Here is an output of adding buttons to the table.
Conclusion
So these were the different ways through which we can create and modify table. Use a table of your choice and style it using Bootstrap.
