# Basic Tables

###### Tables provide responsive, styled tabular data with classes like `.table`, `.table-striped`, `.table-bordered`, and other classes for customization.

## Basic Tables

Add `.table` to any `<table>` element for basic styling with horizontal dividers. The `.table` class adds basic padding and borders to table elements.

##### Default

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter
4 | Larry the Bird | @twitter

##### Inverse

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

## Table head

Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear custom, dark gray, white and themed.

##### Dark

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

##### Light

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

## Table rows

Add `.table-striped` to add zebra-striping to any table, and add `.table-dark` for inverse pattern

##### Pattern

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

##### Pattern inverse

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

## Table Responsive

Make table responsive with `.table-responsive`. Maximum breakpoint can be applied by adding `.table-responsive-sm`, `.table-responsive-md`, `.table-responsive-lg`, `.table-responsive-xl`, `.table-responsive-xxl`, or `.table-responsive-xxxl`

# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell

## Table Bordered

Add `.table-bordered` for borders on all sides of the table and cells. Border color utilities can be added to change colors.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Mark | Otto | @TwBootstrap
3 | Jacob | Thornton | @fat
4 | Larry the Bird | @twitter

## Table Hover

Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. You can also add `.table-dark` for dark tables.

##### Hoverable

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Jhon | Stone | @jhon
2 | Lisa | Nilson | @lisa
3 | Larry | the Bird | @twitter

##### Inverse

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Jhon | Stone | @jhon
2 | Lisa | Nilson | @lisa
3 | Larry | the Bird | @twitter

## Contextual classes

Use contextual classes to color table rows or individual cells. See the full list of color selection

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Lisa | Nilson | @lisa
2 | Lisa | Nilson | @lisa
3 | Nick | looper | @king
4 | Joan | thestar | @joan
5 | Sean | coder | @coder
6 | Sean | coder | @coder

## Table Small

Add `.table-sm` to make tables more compact by cutting cell padding in half. See the full list of color selection to add backgrounds as well

##### Compact

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### With background

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

##### Table nano

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode