Easily create nicely looking tables, which come in different styles.
Usage
To apply this component, add the .uk-table
class to a table. The table rows will be separated by lines.
Example
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 |
Markup
<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>
Columns
To modify the column width or content, you can use other components. Here are some useful examples:
Style | Description |
---|---|
Column width | Add one of the .uk-width-* classes from the Grid component. |
Text alignment | Add the .uk-text-left , .uk-text-right or .uk-text-center class from the Text component. |
Text style | Take a look at the Text component. For example add the .uk-text-bold class. |
Markup
<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>
Vertical modifier
To vertically center table content, just add the .uk-table-middle
class to the <tr>
or <td>
elements.
Modifiers
To display the table in a different style, just add a modifier to the the .uk-table
class.
Table hover
Add the .uk-table-hover
class to display a hover state on table rows.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-hover">...</table>
Table striped
Add zebra-striping to a table by adding the .uk-table-striped
class.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-striped">...</table>
Table condensed
Add the .uk-table-condensed
class to make table cells more compact.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-condensed">...</table>
Combine modifiers
The modifiers of the Table component are combinable with each other.
Example
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Markup
<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>
Responsive Table
If your table happens to be wider that its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div>
element and add the .uk-overflow-container
class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.
Example
Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading |
---|---|---|---|---|---|---|---|
Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Markup
<div class="uk-overflow-container">
<table>...</table>
</div>