Bootstrap 5 Table Captions are used to set the caption position on the table. A table caption is required to put the table name or single keyword information. If you want to use the caption in a different font with proper visibility then you can use any tag for the table caption, caption tag is for that purpose only but you can use any other tag.
Note: A normal caption tag has to put the caption below the table.
Bootstrap 5 Table Captions Class:
- caption-top: This class is used to set the caption position on the top left corner.
Syntax:
<table class="table caption-top">
<caption>....</caption>
...
</table>
The below example illustrates the Bootstrap 5 Table Captions:
Example 1: In this example, we will create 2 tables one will contain the caption tag element with the caption class on the table tag and another will contain an h3 tag with a caption class on the table tag.
<!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">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Captions</strong>
</center>
<table class="table caption-top">
<caption>Road to Web-Developer Part 1</caption>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Practice</th>
<th scope="col">Exercise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>Tag usage</td>
<td>Create a Form</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>Properties usage</td>
<td>Design a Form</td>
</tr>
</tbody>
</table>
<table class="table caption-top">
<h3>Road to Web-Developer Part 2</h3>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Pratice</th>
<th scope="col">Exercise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>JavaScript- Basics to Advance</td>
<td>Event usage</td>
<td>Make the form interactive</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Example 2: In this example, we will create a 4*4 table where the table caption is dedicated.
<!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">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Tables Captions</strong>
</center>
<table class="table caption-top">
<caption>Road to Web-Developer</caption>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Course</th>
<th scope="col">Practice</th>
<th scope="col">Exercise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>HTML- Basics</td>
<td>Tag usage</td>
<td>Create a Form</td>
</tr>
<tr>
<th scope="row">2</th>
<td>CSS- Basics</td>
<td>Properties usage</td>
<td>Design a Form</td>
</tr>
<tr>
<th scope="row">3</th>
<td>JavaScript- Basics to Advance</td>
<td>Event usage</td>
<td>Make the form interactive</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#captions