What are the Different Table Components in Bootstrap?

Bootstrap offers various table components to facilitate the presentation of tabular data. These components include basic tables, as well as options for striped rows, bordered tables, hover effects, condensed layouts, and responsive designs.

Syntax:

<table class="table">
  <!-- Table content goes here -->
</table>

Explanation: The .table class is applied to a <table> element to utilize Bootstrap’s predefined table styles. This allows for the creation of visually appealing and responsive tables with optional features such as striped rows, borders, hover effects, condensed layouts, and responsiveness.

The Table below illustrates the Bootstrap components alongside their respective class names and descriptions.

Component	Class	Description
Basic Table	.table	Standard table layout for displaying data.
Striped Rows	.table-striped	Alternating row colors for improved readability.
Bordered Table	.table-bordered	Borders around cells and table for separation.
Hover Rows	.table-hover	Highlighting rows on hover for interactive feedback.
Condensed Table	.table-condensed	Reduced padding and cell height for a compact layout.
Responsive Table	.table-responsive	Horizontal scrolling on smaller screens for accessibility.

Ref: https://www.geeksforgeeks.org/bootstrap-5-tables/