Tables
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>