Basic Tables
Basic Example
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| User | Status | Action | |
|---|---|---|---|
Mark
|
[email protected] | Active | |
Jacob
|
[email protected] | Inactive | |
Larry
|
[email protected] | Active |
Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
| User | Status | Action | |
|---|---|---|---|
|
Mark
|
[email protected] | Active | |
|
Jacob
|
[email protected] | Inactive | |
|
Larry
|
[email protected] | Active |
Table Head
Use one of two modifier classes to make <thead>s appear light or dark gray.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Table Border Color
Add .table-bordered & .border-* for colored borders on all sides of the table and cells.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Vertical Alignment
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.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley | |
| 4 | Jacob | Thornton |
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |||||||||
|
||||||||||||
| 3 | Jacob | Thornton | @fat | |||||||||
Contextual Classes
Use contextual classes to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
Captions
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.
| # | First Name | Last Name | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Dooley |
Responsive Table
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
