Tornado | Tables
Tables are a nice way to organize data. Tornado provide a few utility classes to help you style your table easily as possible.
Sass Customize
in order to edit the Tables you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/components/_tables.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Tables
in order to apply tornado css on the table give a class name table to you'r html table tag see the example below.
| Head Line 01 | Table Head 02 | Column 3 Head |
|---|---|---|
| Column Number 01 | Column Number 02 | Column Number 03 |
| Column Number 01 | Column Number 02 | Column Number 03 |
<table class="table">
<thead>
<tr>
<th>Head Line 01</th>
<th>Table Head 02</th>
<th>Column 3 Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
</tbody>
</table>
Responsive Table
responsive table is a horizontally scrollable Table on smaller screen widths and in order to make your table to a responsive table create a container and give it a class name responsive-table and for a only mobile device's give the class name responsive-sm-table.
<div class="responsive-table">
<table class="table">
<thead>
<tr>
<th>Head Line 01</th>
<th>Table Head 02</th>
<th>Column 3 Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
one of the most comon theme for is the bordered table and for that to apply all you have to do is add to the table another class name bordered see the example below.
| Style Type | Head Placeholder | Column 3 Head |
|---|---|---|
| Bordered Theme | Striped Mode | Column Number 03 |
| Column Number 01 | Column Number 02 | Column Number 03 |
<div class="responsive-table">
<table class="table bordered">
<thead>
<tr>
<th>Style Type</th>
<th>Head Placeholder</th>
<th>Column 3 Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bordered Theme</td>
<td>Striped Mode</td>
<td>Column Number 03</td>
</tr>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
</tbody>
</table>
</div>
Striped Table
striped table mode in order to apply this theme all you have to do is add to the table another class name striped and works fine with the bordered mode ... see the example below.
| Style Type | Head Placeholder | Column 3 Head |
|---|---|---|
| Bordered Theme | Striped Mode | Column Number 03 |
| Column Number 01 | Column Number 02 | Column Number 03 |
| Column Number 01 | Column Number 02 | Column Number 03 |
<div class="responsive-table">
<table class="table striped">
<thead>
<tr>
<th>Style Type</th>
<th>Head Placeholder</th>
<th>Column 3 Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bordered Theme</td>
<td>Striped Mode</td>
<td>Column Number 03</td>
</tr>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
<tr>
<td>Column Number 01</td>
<td>Column Number 02</td>
<td>Column Number 03</td>
</tr>
</tbody>
</table>
</div>
Coloring Tables
in order to color a complete table or just a row of it or even one column you can use Colors Class's Witch you can find all of them by Clicking Here see the example below.
| Primary Background | Normal Headline | Secondary Headline |
|---|---|---|
| Striped Row | Normal Column | Information |
| Secondary Light | Normal Background | Danger Light |
| Complete Row Color | Column Number 02 | Column Number 03 |