# Shortcodes: Tables

#### Default styles

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

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

    <table class="table">
      ...
    </table>

#### Striped rows

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

Cross-browser compatibility:

Striped tables are styled via the `:nth-child` CSS selector, which is not available in Internet Explorer 8.

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

    <table class="table table-striped">
      ...
    </table>

#### Bordered table

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

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

    <table class="table table-bordered">
      ...
    </table>

#### Hover rows

Add `.table-hover` 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 | @twitter

    <table class="table table-hover">
      ...
    </table>

#### Condensed table

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

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

    <table class="table table-condensed">
      ...
    </table>

#### Contextual classes

Use contextual classes to color table rows or individual cells.

Class | Description
--- | ---
`.active` | Applies the hover color to a particular row or cell
`.success` | Indicates a successful or positive action
`.info` | Indicates a neutral informative change or action
`.warning` | Indicates a warning that might need attention
`.danger` | Indicates a dangerous or potentially negative action

# | 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
6 | Column content | Column content | Column content
7 | Column content | Column content | Column content
8 | Column content | Column content | Column content
9 | Column content | Column content | Column content

    <!-- On rows -->
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>

    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

See also:

- http://getbootstrap.com/css/#tables