# Table

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

## Usage

To apply this component, add the `.uk-table` class to a `<table>` element.

### Example

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

### 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 than 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>