Barren Theme Demo

Tables

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>

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