Using the most basic table markup, here’s how
.table-based tables look in Bootstrap.
Use contextual classes to color tables, table rows or individual cells.
.table-striped to add zebra-striping to any table row within the
These classes can also be added to table variants:
.table-hover to enable a hover state on table rows within a
These hoverable rows can also be combined with the striped variant:
Highlight a table row or cell by adding a
.table-bordered for borders on all sides of the table and cells.
Border color utilities can be added to change colors:
.table-borderless for a table without borders.
.table-sm to make any
.table more compact by cutting all cell
padding in half.
Table cells of
<thead> are always vertical aligned to the bottom. Table cells in
<tbody> inherit their alignment from
<table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.
Border styles, active styles, and table variants are not inherited by nested tables.
Similar to tables and dark tables, use the modifier classes
.table-dark to make
<thead>s appear light or dark gray.
<caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
You can also put the
<caption> on the top of the table with