 |
VOOZH | about |
|
VOOZH | about |
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:
| Term | Description |
|---|---|
| Variants | Used to create different colored tables. Contextual classes create variant tables. |
| Accented tables | Three types: striped, hoverable, and active. Used in different situations for visual effects. |
| How they work | Techniques used to apply effects to all table variants. |
| Table borders | Classes for setting or unsetting table borders. Customizable with Bootstrap 5. |
| Small tables | Create smaller versions of normal tables. |
| Vertical alignment | Sets alignment of table cells' content. |
| Nesting | Allows placing a table inside another table. Prevents parent styles from affecting the child. |
| How nesting works | Explanation of nesting functionality. |
| Anatomy | Table head, table foot, and captions. |
| Responsive tables | Creates tables that scroll horizontally for responsiveness. |
| Sass | Involves Sass map and spacing utilities declared in Utility API. |
The below examples illustrate the Bootstrap 5 Tables:
Example 1: In this example, we will create a small table.
Output:
Example 2: In this example, we will see the use of whole Table anatomy.
Output:
