Tables
Tables are one of the best ways to present a lot of information in an easy-to-read manner. They are perfectly suited for displaying tabular data; pricing pages are one of the most common places where tables can be found. Their purpose is to make the data readable and easily comparable.
Today's web design trends require well-designed tables, so we have developed and included 6 stunning styles in the framework to help you create tables that can be part of design elements.
Today's web design trends require well-designed tables, so we have developed and included 6 stunning styles in the framework to help you create tables that can be part of design elements.
Skin style classes
<table class="table [style-1, style-2, style-3, style-4, style-5, style-6">
<thead>
<tr>
<th>Title col 1</th>
<th>Title col 2</th>
<th>Title col 3</th>
<th>Title col 4</th>
<th>Title col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title col 1">Data col 1</td>
<td data-title="Title col 2">Data col 2</td>
<td data-title="Title col 3">Data col 3</td>
<td data-title="Title col 4">Data col 4</td>
<td data-title="Title col 5">Data col 5</td>
</tr>
...
<tr>
<td data-title="Title col 1">Data col 1</td>
<td data-title="Title col 2">Data col 2</td>
<td data-title="Title col 3">Data col 3</td>
<td data-title="Title col 4">Data col 4</td>
<td data-title="Title col 5">Data col 5</td>
</tr>
</tbody>
</table>
Color classes for style-6 ONLY
<table class="table style-6 [orange, green, blue, purple, aqua, magenta]">
...
</table>
<table class="table [style-1, style-2, style-3, style-4, style-5, style-6">
<thead>
<tr>
<th>Title col 1</th>
<th>Title col 2</th>
<th>Title col 3</th>
<th>Title col 4</th>
<th>Title col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title col 1">Data col 1</td>
<td data-title="Title col 2">Data col 2</td>
<td data-title="Title col 3">Data col 3</td>
<td data-title="Title col 4">Data col 4</td>
<td data-title="Title col 5">Data col 5</td>
</tr>
...
<tr>
<td data-title="Title col 1">Data col 1</td>
<td data-title="Title col 2">Data col 2</td>
<td data-title="Title col 3">Data col 3</td>
<td data-title="Title col 4">Data col 4</td>
<td data-title="Title col 5">Data col 5</td>
</tr>
</tbody>
</table>
Color classes for style-6 ONLY
<table class="table style-6 [orange, green, blue, purple, aqua, magenta]">
...
</table>
Note: The data-title HTML5 attribute is used in mobile view (<768px), when the table switches on block display mode and each cell becomes a row.
Table style-1
| Title col 1 | Title col 2 | Title col 3 | Title col 4 | Title col 5 |
|---|---|---|---|---|
| Content col 1 | Content col 2 | Content col 3 | Content col 4 | Content col 5 |
| Content col 1 | Content col 2 | Content col 3 | Content col 4 | Content col 5 |
| Content col 1 | Content col 2 | Content col 3 | Content col 4 | Content col 5 |
| Content col 1 | Content col 2 | Content col 3 | Content col 4 | Content col 5 |
| Content col 1 | Content col 2 | Content col 3 | Content col 4 | Content col 5 |
Include for table style-1
// Common CSS file for the tables
<link rel="stylesheet" href="css/tables/JFTables.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/tables/JFTableStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
<link rel="stylesheet" href="css/tables/JFTables.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/tables/JFTableStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
Usage for table style-1
<table class="table style-1">
...
</table>
...
</table>