Bootstrap Tables
Bootstrap Tables provide pre-styled and responsive table components, enhancing the presentation of tabular data in web applications. They offer various features like striped rows, hover effects, and responsive behavior, streamlining the process of creating aesthetically pleasing and functional tables with minimal CSS customization.
Bootstrap Tables Types:
Table of Content
- Simple table
- Dark table
- Heading appearance
- Stripped rows
- Bordered table
Simple table:
A Bootstrap simple table combines HTML table structure with Bootstrap styling, offering clean design, features like striped rows, hover effects, and responsiveness, perfect for displaying data in web applications.
Example: In this example we creates a Bootstrap table with headers and rows containing serial numbers, names, cities, and ages. Styling is applied with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- Bootstrap table class -->
<table class="table">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Dark table:
A Bootstrap dark table is a table with dark background and light text, created by applying the table-dark class to the table element in Bootstrap.
Example: In this example we creates Bootstrap table with a dark theme, displaying serial numbers, names, cities, and ages. CSS styling is applied to the header and content sections.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- table, table-dark -->
<table class="table table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Heading appearance:
Bootstrap table head colors are applied using contextual classes like thead-dark or thead-light on the <thead> element to change the background color. For example, <thead class=”thead-dark”>.
Example: In this exmaple we generates two Bootstrap tables: one with a light header and the other with a dark header, displaying serial numbers, names, cities, and ages.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap | Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- table, thead-light -->
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, thead-dark -->
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Stripped rows:
A Bootstrap stripped rows table alternates background colors between rows, providing visual distinction. Apply the table-striped class to a Bootstrap table to enable this feature.
Example: In this example we generates two Bootstrap tables: one with striped rows and the other with both striped rows and a dark theme, displaying serial numbers, names, cities, and ages.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap | Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- table, table-stripped -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, table-stripped, table-dark -->
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Bordered table:
A Bootstrap bordered table adds borders around each cell of the table. Apply the table-bordered class to a Bootstrap table to enable this feature.
Example: In this example we creates two Bootstrap tables: one with bordered cells and the other with bordered cells and a dark theme, showing serial numbers, names, cities, and ages.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- table, table-bordered -->
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, table-bordered, table-dark -->
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output: