Signup/Sign In

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.

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.

Inverted color 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.

Dark-head Table

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.

striped-table.

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.

Table-Border

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.

Table-borderless

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.

Table-hover

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.

Table-small

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.

Contextual-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.

Table button

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.