Bootstrap Tables
Bootstrap provides a set of classes that you can use to create tables with different styles and functionality.
Here are some of the key table classes in Bootstrap:
.table: This is the base class for tables in Bootstrap 5. It adds basic styling and horizontal dividers between rows.
.table-striped: This class adds zebra-striping to the table. Alternate rows are given different background colors to improve readability.
.table-hover: This class adds a hover effect to the table rows. When you hover over a row, the background color changes to indicate that it is clickable.
.table-bordered: This class adds borders to all sides of the table and the cells.
.table-borderless: This class removes borders from the table and the cells.
.table-dark: This class adds a dark background color and light text color to the table. It is useful for creating tables that stand out on a page with a light background.
.table-responsive: This class makes the table responsive, so that it can be viewed on smaller screens without horizontal scrolling.
Here is an example of how to create a simple table with striped rows and a dark background color:
In this example:
- The
.table class adds basic styling to the table, the .table-striped class adds zebra-striping to the table rows, and the .table-dark class adds a dark background color to the table. - The table also has a heading row, which is created using the
<thead> and <tr> tags, and a body section, which is created using the <tbody> tag.