Tables

Modified on: Mon, 19 Mar, 2018 10:21 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>

Was this answer helpful? Yes No

Sorry we couldn't be helpful. Help us improve this article with your feedback.
Theme options
This widget is for demo purposes only