Bootstrap 5 Tables
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:
- Variants: This is used to create different colored tables, and contextual classes are used to create different variant tables.
- Accented tables: There are three types of accented tables, striped, hoverable, and active, all of which are required in different situations.
- How do the variants and accented tables work: On the accented tables we used some techniques to make these effects work for all our table variants.
- Table borders: Table border classes are used to set or unset the border of the table. With bootstrap 5 table borders are easy to customize with border or no border.
- Small tables: Small tables are used to create small size of tables. These tables are just smaller versions of the normal tables.
- Vertical alignment: This is used to set the alignment of the table cells’ content.
- Nesting: Table nesting is used to make a table inside of a table. Nesting is an important feature that is used in all the elements, especially on the listing.
- How nesting works: Nesting is an important feature that is used in all the elements, especially on the listing. Nesting does not allow leaking of the style of the parent to the child.
- Anatomy: Table anatomy contains three parts of table head, table foot, and captions, you may think about where is the body as I did in tables but there are no classes for that.
- Responsive tables: Responsive tables are used to create a table that will be scrolled horizontally easily.
- Sass: This involves the Sass map and spacing utilities that are 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= rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="m-3"> <center> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap 5 Tables Small Table</strong> </center> <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 2: In this example, we will see the use of whole Table anatomy.
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 Anatomy</strong> </center> <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
Reference: https://getbootstrap.com/docs/5.0/content/tables/
Please Login to comment...