For truly tabular data, use the <table> tag and add the class .table. The table element applies basic stying propeties and padding to the default <table> element.

<table class="table">

  <!--Table Head-->
  <thead>
    <!--Table Row-->
    <tr>
      <!--Table Head Cell-->
      <th>
      </th>
      …
    </tr>
  </thead>

  <!--Table Body-->
  <tbody>
    <!--Table Row-->
    <tr>
      <!--Table Cell-->
      <td>
      </td>
      …
    </tr>
    …
  </tbody>

</table>

Hover Rows

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

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

Add .table-row-hover-disabled to any <tr> to disable the row hover behavior and styling.

Borderless Tables

Add .table-borderless to remove the outer borders from the table.

<table class="table table-borderless-outer table-borderless-inner-columns">
  …
</table>

Flush Tables

Add .table-flush to remove the horizontal padding applied to the first and last cell of a table row.

<table class="table table-flush table-borderless-outer table-borderless-inner-columns">
  …
</table>

Conditional Row States

Use contextual classes to color table rows or individual cells.

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

Inverse Styling

Add the class .table-inverse to any .table element to leverage inverse styling.

<table class="table table-inverse table-borderless-outer table-borderless-inner-columns">
  …
</table>

Table Sizes

By default, tables display at a standard size. Additional sizes are available: small and large. Add classes .table-small and .table-large respectively to each table to adjust it’s size.

<table class="table table-small">
  …
</table>

<table class="table table-large">
  …
</table>