Bootstrap 5 Table head
Last Updated :
24 Nov, 2022
Bootstrap 5 Table head class is used to set the thead elements’ background color. Sometimes we need a table with a dark header for a better-suited situation. We can use these classes to change the background color of the thead section of a table.
Bootstrap 5 Table head Classes:
- table-light: This class is used to set the background color of the element light gray.
- table-dark: This class is used to set the background color of the element dark gray.
Syntax: The * is replaceable with light and dark.
<table class="table">
<thead class="table-*">
...
</thead>
<tbody>
...
</tbody>
</table>
Example 1: In this example, we will create a light header table.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Head</strong>
</center>
<table class="table">
<thead class="table-light">
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>$29</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>$25</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JS- Basics</td>
<td>$35</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Bootstrap 5 Table head
Example 2: In this example, we will create a dark header table.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Head</strong>
</center>
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>$29</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>$25</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JS- Basics</td>
<td>$35</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Bootstrap 5 Table head
Reference: https://getbootstrap.com/docs/5.0/content/tables/#table-head
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...