1. Solution home
  2. Usage Guides
  3. Formatting Content

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>
J
Jeffrey is the author of this solution article.

Did you find it helpful? Yes No

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