Bootstrap 5 Reboot Tables
Last Updated :
20 Feb, 2023
Bootstrap 5 Reboot Tables are designed to style captions, borders, alignment, and much more. Many more styles are provided by Bootstrap 5 Reboot Tables like padding / accented tables etc.
Bootstrap 5 Reboot Tables Used Classes: There are no special classes for BootStrap 5 Reboot Tables. The classes of Bootstrap 5 tables will be used.
Bootstrap 5 Reboot Tables Used Attribute:
- <caption>: This attribute is used for writing the caption of the table. This appears in text-muted color
Syntax:
<table class="table">
<caption>
...
</caption>
...
</table>
Example 1: In this example, we will how to provide caption /text alignment and collapse borders in the Reboot Tables
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >BootStrap5 Reboot Tables</ title >
</ head >
< body class = "m-3 col-6" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >BootStrap5 Reboot Tables</ h2 >
< table class = "table" >
< caption >
Road to Web-Developer Part 1 - Caption by Reboot Tables
</ 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 >
</ body >
</ html >
|
Output:
BootStrap5 Reboot Tables
Example 2: In this example, we will learn about .table class with hover and border styling
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >BootStrap5 Reboot Tables</ title >
</ head >
< body class = "m-3 col-6" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >BootStrap5 Reboot Tables</ h2 >
< table class = "table table-hover table-bordered" >
< caption >
Road to Web-Developer Part 1 - Caption by Reboot Tables
</ 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 >
</ body >
</ html >
|
Output
BootStrap5 Reboot Tables
Reference: https://getbootstrap.com/docs/5.0/content/reboot/#tables
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...