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:
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