Elements

If you can dream it, you can do it

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 caption
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

demo