Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles.

Use contextual classes to color tables, table rows or individual cells.

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Use .table-striped-columns to add zebra-striping to any table column.

Add .table-hover to enable a hover state on table rows within a <tbody>

Highlight a table row or cell by adding a .table-active class.

Add .table-bordered for borders on all sides of the table and cells.

Add .table-borderless for a table without borders.

Add .table-sm to make any .table more compact by cutting all cell padding in half.

Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

Border styles, active styles, and table variants are not inherited by nested tables.

Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.

A <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.