Bootstrap 5 Table Captions
Last Updated :
20 Feb, 2023
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.
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 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.
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 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:
Bootstrap 5 Table Captions
Reference: https://getbootstrap.com/docs/5.0/content/tables/#captions
Share your thoughts in the comments
Please Login to comment...