Tables
There are many uses for tables, and Tentaroo makes it easy to display your table data in an eye-catching, mobile-responsive format. Below, we have several different classes of tables for you to choose from.
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
This table does not contain any style. When you add a table using the WYSIWYG feature, clear the default style fields (i.e. Width, Cell Spacing/Padding, Border Size) and it will appear like this by default.
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo1"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo2"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo3"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo4"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo5"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo-grid"
| ID | First Name | Last Name |
|---|---|---|
| 235312 | John | Doe |
| 453123 | Mark | Jones |
| 998332 | Jonathan | Smith |
| 345612 | Andrew | McArthur |
| 453123 | Adam | Fuller |
| 998332 | Tyler | Watt |
Use class="tentaroo-none"
Here is the sample for code:
<table class="tentaroo1">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">235312</a></td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>453123</td>
<td>Mark</td>
<td>Jones</td>
</tr>
<tr>
<td>998332</td>
<td>Jonathan</td>
<td>Smith</td>
</tr>
<tr>
<td>345612</td>
<td>Andrew</td>
<td>McArthur</td>
</tr>
<tr>
<td>453123</td>
<td>Adam</td>
<td>Fuller</td>
</tr>
<tr>
<td>998332</td>
<td>Tyler</td>
<td>Watt</td>
</tr>
</tbody>
</table>