Bootstrap 5 Reboot Tables
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < title >BootStrap5 Reboot Tables</ title > </ head > < body class = "m-3 col-6" > < h1 class = "text-success" > w3wiki </ 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:
Example 2: In this example, we will learn about .table class with hover and border styling
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" > < title >BootStrap5 Reboot Tables</ title > </ head > < body class = "m-3 col-6" > < h1 class = "text-success" > w3wiki </ 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
Reference: https://getbootstrap.com/docs/5.0/content/reboot/#tables
Contact Us