Tables
To create clean formatted tables using uikit style, add the uk-table class to a table. The table rows will be separated by lines.
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Footer | Table Footer | Table Footer |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
show code
<table class="uk-table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<td>...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Style variation
You can add more styling to the table by using a combination of classes to improve the visual appearance of your table
| Settings | Productivity | Totals |
|---|---|---|
| Totals | $ 49,000.00 | |
| Table Data | Table Data | $ 10,000.00 |
| Table Data | Table Data | $ 15,000.00 |
| Table Data | Table Data | $ 24,000.00 |
show code
<table class="uk-table uk-table-hover uk-table-striped">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tfoot>
<tr>
<td>...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
You can view more examples and classes that you can use from here
