#### Tables

`

    <table class="table">
    <thead>
       <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
       </tr>
       <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
       </tr>
       <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
       </tr>
    </tbody>
    </table>

`

The `.table` class adds basic styling to a table.

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

#### Table Head Options

`

    <table class="table">
       <thead class="thead-dark">
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>
    <table class="table">
       <thead class="thead-light">
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

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

#### Borderless table

`

    <table class="table table-borderless">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

`.table-borderless` can also be used on dark tables.

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

#### Small table

`

    <table class="table table-sm">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>
    <table class="table table-sm table-dark">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

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

#### Captions

`

    <table class="table">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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 | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Table Dark

`

    <table class="table table-dark">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

#### Striped Rows

`

    <table class="table table-striped">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>
    <table class="table table-striped table-dark">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

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

#### Hoverable rows

`

    <table class="table table-hover">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>
    <table class="table table-hover table-dark">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">First</th>
             <th scope="col">Last</th>
             <th scope="col">Handle</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
             <td>@twitter</td>
          </tr>
       </tbody>
    </table>

`

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

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

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

#### Contextual classes

`

    <table class="table">
       <thead>
          <tr>
             <th scope="col">Class</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
          </tr>
       </thead>
       <tbody>
          <tr class="table-active">
             <th scope="row">Active</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr>
             <th scope="row">Default</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-primary">
             <th scope="row">Primary</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-secondary">
             <th scope="row">Secondary</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-success">
             <th scope="row">Success</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-danger">
             <th scope="row">Danger</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-warning">
             <th scope="row">Warning</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr class="table-info">
             <th scope="row">Info</th>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
       </tbody>
    </table>

`

Use contextual classes to color table rows or individual cells.

Class | Heading | Heading
--- | --- | ---
Active | Cell | Cell
Default | Cell | Cell
Primary | Cell | Cell
Secondary | Cell | Cell
Success | Cell | Cell
Danger | Cell | Cell
Warning | Cell | Cell
Info | Cell | Cell

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# | Heading | Heading
--- | --- | ---
1 | Cell | Cell
2 | Cell | Cell
3 | Cell | Cell
4 | Cell | Cell
5 | Cell | Cell
6 | Cell | Cell
7 | Cell | Cell
8 | Cell | Cell
9 | Cell | Cell

#### Responsive tables

`

    <table class="table">
       <thead>
          <tr>
             <th scope="col">#</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
             <th scope="col">Heading</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <th scope="row">1</th>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr>
             <th scope="row">2</th>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
          <tr>
             <th scope="row">3</th>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
             <td>Cell</td>
          </tr>
       </tbody>
    </table>

`

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.

# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell