Bootstrap 5 Table Anatomy contains three parts of table-head, table-foot & captions, you may think about where is the body as I did in tables but there are no classes for that. We can decorate the body part by using different classes like background color classes or text color classes.
Bootstrap 5 Table Anatomy:
- Table head: Table head .table- class is used to set the thead elements’ background color.
- Table foot: Table foot does not require any class to set the table foot, but we can change its background color .
- Captions: Caption class is used to set the position of the caption on the top-left corner of the table.
Below example illustrates the Bootstrap 5 Table Anatomy:
Example 1: In this example, we will have a table that will have a black background header with a table footer and a caption.
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 Anatomy</strong>
</center>
<table class="table caption-top">
<caption>Front-end Courses</caption>
<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>
<tfoot>
<tr>
<th scope="row"></th>
<td>Front-End Bundle</td>
<td>$89</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
Output:
Example 2: In this example, we will have a table that will have a light background header with a table footer and a caption.
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 Anatomy</strong>
</center>
<table class="table caption-top">
<caption>Front-end Courses</caption>
<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>
<tfoot>
<tr>
<th scope="row"></th>
<td>Front-End Bundle</td>
<td>$89</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
Output:
Bootstrap 5 Table Anatomy
Reference: https://getbootstrap.com/docs/5.0/content/tables/#anatomy