Tables – Iowa Theme Demo

Generic Table

Month	Savings
Sum	$270
January	$100
February	$80
March	$90

<table class="table">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Color Header:

Month	Savings
Sum	$270
January	$100
February	$80
March	$90

<table class="table table--color-header">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Bordered table

Month	Savings
January	$100
February	$80
March	$90
Sum	$270

<table class="table table--bordered">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Striped table

Month	Savings
January	$100
February	$80
March	$90
Sum	$270

<table class="table table--striped">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Hover-color table

Month	Savings
January	$100
February	$80
March	$90
Sum	$270

<table class="table table--hover">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>