Tables

Jeffrey Davis

Modified on: Thu, 28 Apr, 2022 at 7:46 AM

Generic Table

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

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

Color Header table

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

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

Dashed table

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

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

Striped table

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

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

No bordered table

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

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

Hover-colored table

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

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