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