Basic Tables
Basic example
For basic styling—light padding and only horizontal dividers—add the base class table to any <table>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table Dark
You can also invert the colors—with light text on dark backgrounds—with table-dark.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table head options
Similar to tables and dark tables, use the modifier classes .table-light to make <thead>s appear light or dark gray.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table head options
Similar to tables and dark tables, use the modifier classes .table-dark to make <thead>s appear light or dark gray.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped rows
Use .table-striped to add zebra-striping to any table row within the
.| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @adam |
| 3 | Mark | Otto | @tailwind |
| 4 | Larry | the Bird |
Hoverable rows
Add hover-{color}-* to enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Small table
Add to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Mark | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| 4 | Steve | Otto | @stv |
| 5 | Percy | Taylor | @prt |
| 6 | Cecil | Clark | @cec |
Contextual classes
Use contextual classes to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column heading | Column heading | Column heading |
| 2 | Column heading | Column heading | Column heading |
| 3 | Column heading | Column heading | Column heading |
| 4 | Column heading | Column heading | Column heading |
| 5 | Column heading | Column heading | Column heading |
| 6 | Column heading | Column heading | Column heading |
| 7 | Column heading | Column heading | Column heading |
| 8 | Column heading | Column heading | Column heading |
| 9 | Column heading | Column heading | Column heading |
Contextual with background color
Use contextual classes to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column heading | Column heading | Column heading |
| 2 | Column heading | Column heading | Column heading |
| 3 | Column heading | Column heading | Column heading |
| 4 | Column heading | Column heading | Column heading |
| 5 | Column heading | Column heading | Column heading |
| 6 | Column heading | Column heading | Column heading |
| 7 | Column heading | Column heading | Column heading |
| 8 | Column heading | Column heading | Column heading |
| 9 | Column heading | Column heading | Column heading |
Borderless table
Add divide for a table without borders.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Steve | Otto | @stv |
| 5 | Percy | Taylor | @prt |
Captions
A 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.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
List of users