Bootstrap 5 Tables
Last Updated :
10 Apr, 2024
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.
Bootstrap 5 Tables:
| Term | Description |
|---|
| Variants | Used to create different colored tables. Contextual classes create variant tables. |
| Accented tables | Three types: striped, hoverable, and active. Used in different situations for visual effects. |
| How they work | Techniques used to apply effects to all table variants. |
| Table borders | Classes for setting or unsetting table borders. Customizable with Bootstrap 5. |
| Small tables | Create smaller versions of normal tables. |
| Vertical alignment | Sets alignment of table cells’ content. |
| Nesting | Allows placing a table inside another table. Prevents parent styles from affecting the child. |
| How nesting works | Explanation of nesting functionality. |
| Anatomy | Table head, table foot, and captions. |
| Responsive tables | Creates tables that scroll horizontally for responsiveness. |
| Sass | Involves Sass map and spacing utilities declared in Utility API. |
The below examples illustrate the Bootstrap 5 Tables:
Example 1: In this example, we will create a small table.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="m-3">
<strong
>Bootstrap 5 Tables Small
Table</strong
>
<table class="table table-sm">
<thead>
<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 Tables Example Output
Example 2: In this example, we will see the use of whole Table anatomy.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="m-3">
<strong
>Bootstrap 5 Tables Anatomy</strong
>
<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:
Bootstrap 5 Tables Example Output
Share your thoughts in the comments
Please Login to comment...