Easily create nicely looking tables, which come in different styles.

\n\n

Usage

\n\n

To apply this component, add the .uk-table class to a table. The table rows will be separated by lines.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table caption
Table HeadingTable HeadingTable Heading
Table FooterTable FooterTable Footer
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
\n
\n\n

Markup

\n\n
<table class="uk-table">\n    <caption>...</caption>\n    <thead>\n        <tr>\n            <th>...</th>\n        </tr>\n    </thead>\n    <tfoot>\n        <tr>\n            <td>...</td>\n        </tr>\n    </tfoot>\n    <tbody>\n        <tr>\n            <td>...</td>\n        </tr>\n    </tbody>\n</table>
\n\n
\n\n

Columns

\n\n

To modify the column width or content, you can use other components. Here are some useful examples:

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StyleDescription
Column widthAdd one of the .uk-width-* classes from the Grid component.
Text alignmentAdd the .uk-text-left, .uk-text-right or .uk-text-center class from the Text component.
Text styleTake a look at the Text component. For example add the .uk-text-bold class.
\n
\n\n

Markup

\n\n
<td class="uk-width-1-10 uk-text-right">...</td>\n<td class="uk-width-9-10 uk-text-bold">...</td>
\n\n
\n\n

Vertical modifier

\n\n

To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.

\n\n
\n\n

Modifiers

\n\n

To display the table in a different style, just add a modifier to the the .uk-table class.

\n\n

Table hover

\n\n

Add the .uk-table-hover class to display a hover state on table rows.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable HeadingTable Heading
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
\n
\n\n

Markup

\n\n
<table class="uk-table uk-table-hover">...</table>
\n\n
\n\n

Table striped

\n\n

Add zebra-striping to a table by adding the .uk-table-striped class.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable HeadingTable Heading
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
\n
\n\n

Markup

\n\n
<table class="uk-table uk-table-striped">...</table>
\n\n
\n\n

Table condensed

\n\n

Add the .uk-table-condensed class to make table cells more compact.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable HeadingTable Heading
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
\n
\n\n

Markup

\n\n
<table class="uk-table uk-table-condensed">...</table>
\n\n
\n\n

Combine modifiers

\n\n

The modifiers of the Table component are combinable with each other.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable HeadingTable Heading
Table DataTable DataTable Data
Table DataTable DataTable Data
Table DataTable DataTable Data
\n
\n\n

Markup

\n\n
<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>
\n\n
\n\n

Responsive Table

\n\n

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.

\n\n

Example

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable HeadingTable HeadingTable HeadingTable HeadingTable HeadingTable HeadingTable Heading
Table FooterTable FooterTable FooterTable FooterTable FooterTable FooterTable FooterTable Footer
Table DataTable DataTable DataTable DataTable DataTable DataTable DataTable Data
Table DataTable DataTable DataTable DataTable DataTable DataTable DataTable Data
Table DataTable DataTable DataTable DataTable DataTable DataTable DataTable Data
\n
\n\n

Markup

\n\n
<div class="uk-overflow-container">\n    <table>...</table>\n</div>
\n