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>