### Basic Tables

#### Basic Example

For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.

User | Email | Status | Action
--- | --- | --- | ---
Mark | mark@example.com | Active |
Jacob | jacob@example.com | Inactive |
Larry | larry@example.com | Active |

#### Dark Table

You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.

User | Email | Status | Action
--- | --- | --- | ---
Mark | mark@example.com | Active |
Jacob | jacob@example.com | Inactive |
Larry | larry@example.com | 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 |

#### Bordered Table

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

# | First Name | Last Name | Action
--- | --- | --- | ---
1 | Mark | Otto |
2 | Jacob | Thornton |
3 | Larry | Dooley |

#### Borderless Table

Add `.table-borderless` for a table without borders.

# | 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 |

#### 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
Header | Header | Header
--- | --- | ---
A | First | Last
B | First | Last
3 | Jacob | Thornton | @fat

#### Hoverable Rows

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

# | First Name | Last Name | Action
--- | --- | --- | ---
1 | Mark | Otto |
2 | Jacob | Thornton |
3 | Larry | Dooley |

#### Small Table

Add `.table-sm` to make tables more compact by cutting cell padding in half.

# | First Name | Last Name | Action
--- | --- | --- | ---
1 | Mark | Otto |
2 | Jacob | Thornton |
3 | Larry | Dooley |
4 | Mark | Otto |

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

List of users
# | First Name | Last Name | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | Dooley | @twitter

#### Responsive Table

Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px).

# | Invoice No | Customer | Date | Amount | Payment Mode | Status | Action
--- | --- | --- | --- | --- | --- | --- | ---
1 | ###### #INV368967 | ###### Laura Biding | 13 May 2025 | $950 | ###### Cash on Delivery | Pending |
2 | ###### #INV368967 | ###### Justin Gaethje | 13 May 2025 | $950 | ###### Online Payment | Cancelled |
3 | ###### #INV368967 | ###### Simon Cohen | 13 May 2025 | $950 | ###### Cheque | Completed |