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 article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article