”;
This chapter will discuss about bootstrap tables and the classes to create table. Tables is used to organize data in the form
of rows and columns. Tables allow you to group huge amounts of data and present them clearly and in an orderly manner. Some table items supported by Bootstraps are listed below.
| Sr.No. | Tag & Description |
|---|---|
| 1 |
<table>
Wrapping element for displaying data in a tabular format |
| 2 |
<thead>
Container element for table header rows (<tr>) to label table columns. |
| 3 |
<tbody>
Container element for table rows (<tr>) in the body of the table. |
| 4 |
<tr>
Container element for a set of table cells (<td> or <th>) that appears on a single row. |
| 5 |
<td>
Default table cell. |
| 6 |
<th>
Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead> |
| 7 |
<caption>
Defines a table caption |
Simple table
If you want a basic table style with just a little light padding and horizontal dividers, add the .table
class at table, as shown in the example below.
Example
You can edit and try running this code using Edit & Run option.
<DOCTYPE html >
<html lang="en">
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title >Bootstrap - Table</title >
</head >
<body >
<table class="table" >
<thead >
<tr >
<th scope="col" >Sr.No.</th >
<th scope="col" >Name</th >
<th scope="col" >Role</th >
<th scope="col" >Salary</th >
</tr >
</thead >
<tbody >
<tr >
<th scope="row" >1</th >
<td >Jhon</td >
<td >Software Developer</td >
<td >40000</td >
</tr >
<tr >
<th scope="row" >2</th >
<td >David</td >
<td >Tester</td >
<td >50000</td >
</tr >
<tr >
<th scope="row" >3</th >
<td >Mary</td >
<td >Data Analyst</td >
<td >35000</td >
</tr >
</tbody >
</table >
</body >
</html >
Variants
The contextual classes allow you to change the background color of your table rows or individual cells. Add classes .table-active, .table-success, .table-danger,
.table-warning class to Highlight a table row or cell, as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Table</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr class="table-default">
<th scope="row">1</th>
<td>Oliver</td>
<td>Full satck developer</td>
<td>40000</td>
</tr>
<tr class="table-primary">
<th scope="row">2</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>43000</td>
</tr>
<tr class="table-secondary">
<th scope="row">3</th>
<td>David</td>
<td>Tester</td>
<td>60000</td>
</tr>
<tr class="table-info">
<th scope="row">4</th>
<td>Sam</td>
<td>Software Developer</td>
<td>35000</td>
</tr>
<tr class="table-danger">
<th scope="row">5</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>36000</td>
</tr>
<tr class="table-success">
<th scope="row">6</th>
<td>James</td>
<td>Tester</td>
<td>47000</td>
</tr>
<tr class="table-active">
<th scope="row">7</th>
<td>Mary</td>
<td>HR</td>
<td>90000</td>
</tr>
<tr class="table-light">
<th scope="row">8</th>
<td>Noah</td>
<td>Data Analyst</td>
<td>50000</td>
</tr>
<tr class="table-warning">
<th scope="row">9</th>
<td>Lucas</td>
<td>Software Developer</td>
<td>52000</td>
</tr>
<tr class="table-dark">
<th scope="row">10</th>
<td>Almand</td>
<td>Software Developer</td>
<td>73000</td>
</tr>
</tbody>
</table>
</body>
</html>
Accented tables
Striped rows
To get zebra-striping on the rows add .table-striped class in the .tbody as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Striped columns
To get zebra-striping on the columns add .table-striped-columns class in the .tbody as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-dark and .table-striped to get the dark color zebra-striping on the table.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-dark and .table-striped-columns to get the dark color zebra-striping columns.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-success and .table-striped to get the light green color zebra-striping on the table.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-success table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-success and .table-striped-columns to get the light green color zebra-striping columns on the table.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-success table-striped-columns">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Hoverable rows
Add the .table-hover class to get the hover effect on table rows as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-hover table-secondary">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-hover and .table-dark to get the dark color hover effect on table rows.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-dark table-hover">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the classes .table-hover and .table-striped to get the hover effect with zebra-striping on the table.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-hover table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Active table
Add .table-active class to highlight the row or cell of the table.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr class="table-active">
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Bordered table
To get boundaries around each item and rounded corners around the whole table add .table-bordered class in the .tbody as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Tables without borders
To get the table without borders add .table-borderless class in the .tbody as shown in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Small tables
To make table more compact by cutting all cell padding in half by adding .table-sm class to any .table, as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Table group dividers
To make table border thicker and darker between table groups .thead, .tbody and .tfoot add a .table-sm class, as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mary</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Vertical alignment
The cells of the <thead> table are always vertically aligned to the bottom.
The cells in the <tbody> table inherit their alignment from <table> and are aligned to the top by default. Use the vertical alignment classes to re-align as required
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Tables</title>
</head>
<body>
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr class="align-bottom">
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Mery</td>
<td class="align-top">Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Responsive table
Responsive tables enable horizontal scrolling of the table. Wrapping class .table with .table-responsive makes a table responsive across different view ports. Add a maximum breakpoint to a responsive table by using .table-responsive{-sm|-md|-lg|-xl|-xxl}. Following table depicts the screensize and respective Bootstrap table class:
| Class | Screen width |
|---|---|
| .table-responsive-sm | < 576px |
| .table-responsive-md | < 768px |
| .table-responsive-lg | < 992px |
| .table-responsive-xl | < 1200px |
| .table-responsive-xxl | < 1400px |
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Age</th>
<th scope="col">Blood Group</th>
<th scope="col">gender</th>
<th scope="col">Address</th>
<th scope="col">Married</th>
<th scope="col">Education</th>
<th scope="col">AdharCard Number</th>
<th scope="col">Pan Number</th>
<th scope="col">City</th>
<th scope="col">Country</th>
<th scope="col">Salary</th>
<th scope="col">status</th>
<th scope="col">status</th>
<th scope="col">status</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Jhon</td>
<td>Software Developer</td>
<td>32</td>
<td>A+</td>
<td>Male</td>
<td>Pune,Maharashtra.</td>
<td>Yes</td>
<td>B.E(Computer Science)</td>
<td>0101010101010101</td>
<td>2020200202020202</td>
<td>Pune</td>
<td>India</td>
<td>40000</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nesting
Table nesting is used to create a table inside of a table, as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead class="table">
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0 table-striped">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Almand</td>
<td>Software Developer</td>
<td>60000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>35000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>Data Analyst</td>
<td>40000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mona</td>
<td>Data Analyst</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Oliver</td>
<td>Tester</td>
<td>45000</td>
</tr>
</tbody>
</table>
</body>
</html>
Anatomy
Table head
Add classes .table-secondary to make table head gray color, as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead class="table-secondary">
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Table foot
The .tfoot class add footer at the end of the table, as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">footer</th>
<td >footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
Caption
A <caption> functions use to give a heading for a table., as seen in the below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Table</title>
</head>
<body>
<table class="table">
<caption>List of Employees</caption>
<thead>
<tr>
<th scope="col">Sr.No.</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhon</td>
<td>Software Developer</td>
<td>40000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>Tester</td>
<td>50000</td>
</tr>
<tr>
<th scope="row">3</th>
<td >mery</td>
<td>Data Analyst</td>
<td>35000</td>
</tr>
</tbody>
</table>
</body>
</html>
Advertisements
”;