Table

Basic Usage

You can style a Table by adding the table class to any table element.

First Name	Last Name	Job Area	Job Title
John	Johnson	Analytics	Data Analyst
Jack	Jackson	Analytics	Manager
Robin	Robinson	Engineering	Software Engineer

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Area</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Johnson</td>
      <td>Analytics</td>
      <td>Data Analyst</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Jackson</td>
      <td>Analytics</td>
      <td>Manager</td>
    </tr>
    <tr>
      <td>Robin</td>
      <td>Robinson</td>
      <td>Engineering</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Caption/Footer

The caption and tfoot elements are styled automatically.

Sales Figures
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422
Total	$5,213,487

<table class="table">
  <caption>
    Sales Figures
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$5,213,487</td>
    </tr>
  </tfoot>
</table>

Subtle

You can make the styling softer by adding the class subtle to the table element.

Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

<table class="table subtle">
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>

Density

You can make a Table more compact by adding the class dense or more spread out with the class sparse.

Dense
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

Sparse
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

<table class="table dense">
  <caption>
    Dense
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>
<table class="table sparse">
  <caption>
    Sparse
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>