Таблицы

Легко создавайте красивые таблицы с различной стилизацией.

Все варианты работы таблиц смотрите в разделе примеры таблиц.

Использование

Чтобы начать работу с компонентом, добавьте класс .uk-table к элементу <table>.

<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>
  • Table Caption
    Заголовок Заголовок Заголовок
    Футер Футер Футер
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Футер</td>
            <td>Футер</td>
            <td>Футер</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Модификатор разделителя

Добавьте класс .uk-table-divider, чтобы отобразить разделитель между строками таблицы.

<table class="uk-table uk-table-divider">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-divider">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Полосатый модификатор

Добавьте стиль зебры к таблице, присвоив класс .uk-table-striped.

<table class="uk-table uk-table-striped">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Модификатор наведения

Добавьте класс .uk-table-hover для отображения состояния наведения на строки таблицы.

<table class="uk-table uk-table-hover">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-hover uk-table-divider">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Модификаторы размера

Добавьте класс .uk-table-small или .uk-table-large чтобы сделать таблицу меньше или больше.

<table class="uk-table uk-table-small">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-small uk-table-divider">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Модификатор отключения краев

Чтобы удалить внешние отступы первого и последнего столбца, чтобы они находились на одном уровне с таблицей, добавьте класс .uk-table-justify.

<table class="uk-table uk-table-justify">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ячейка Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • <table class="uk-table uk-table-justify uk-table-divider">
    <thead>
        <tr>
            <th class="uk-width-small">Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><Кнопка class="uk-Кнопка uk-Кнопка-default" type="Кнопка">Кнопка</Кнопка></td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><Кнопка class="uk-Кнопка uk-Кнопка-default" type="Кнопка">Кнопка</Кнопка></td>
        </tr>
    </tbody>
</table>

Модификатор выравнивания

Для вертикального центрирования содержимого таблицы просто добавьте класс .uk-table-middle. Вы также можете применить класс к элементам <tr> или <td> для конкретных случаев.

<table class="uk-table uk-table-middle">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ячейка Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • <table class="uk-table uk-table-middle uk-table-divider">
    <thead>
        <tr>
            <th class="uk-width-small">Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><Кнопка class="uk-Кнопка uk-Кнопка-default" type="Кнопка">Кнопка</Кнопка></td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><Кнопка class="uk-Кнопка uk-Кнопка-default" type="Кнопка">Кнопка</Кнопка></td>
        </tr>
    </tbody>
</table>

Адаптивная таблица

Если ваша таблица окажется шире, чем ее контейнер, или со временем станет слишком большой для определенной ширины области просмотра, оберните ее элементом <div> с классом .uk-overflow-auto из компонента Утилиты. Это создает контейнер, который обеспечивает горизонтальную полосу прокрутки всякий раз, когда ширина таблицы превышает ширину родителя.

<div class="uk-overflow-auto">
    <table class="uk-table">...</table>
</div>
  • Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка 
  • <div class="uk-overflow-auto">
    <table class="uk-table uk-table-small uk-table-divider">
        <thead>
            <tr>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
                <th>Заголовок</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
            </tr>
            <tr>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
                <td>Ячейка</td>
            </tr>
        </tbody>
    </table>
</div>

Маленькие экнаны

Если вы хотите, чтобы столбцы таблицы располагались корректно на маленьких экранах, добавьте класс .uk-table-responsive.

<table class="uk-table uk-table-responsive">...</table>
  • Заголовок Заголовок Заголовок
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-responsive uk-table-divider">
    <thead>
        <tr>
            <th>Заголовок</th>
            <th>Заголовок</th>
            <th>Заголовок</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Внимание Сожмите окно бразузера, чтобы увидеть результат.

Модификатор ширины ячейки

Чтобы изменить ширину столбца или содержимого, вы можете использовать один из следующих классов. Вам просто нужно добавить этот класс в одну из ячеек столбца. Рекомендуется добавлять к ячейке заголовка.

Класс Описание
.uk-table-shrink Добавьте этот класс к элементу <th> или <td>, чтобы уменьшить ширину столбца и сделать его ширину равной содержимому.
.uk-table-expand Добавьте этот класс к элементу <th> или <td>, чтобы увеличить ширину столбца и заполнить оставшееся пространство.
.uk-width-* Добавьте один из этих классов компонента Ширина к элементу <th> или <td> для изменения ширины столбца. 
<th class="uk-table-shrink"></th>
  • Shrink Expand Width Small
    Ячейка Ячейка Ячейка
    Ячейка Ячейка Ячейка 
  • <table class="uk-table uk-table-divider">
    <thead>
        <tr>
            <th class="uk-table-shrink">Shrink</th>
            <th class="uk-table-expand">Expand</th>
            <th class="uk-width-small">Width Small</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
        <tr>
            <td>Ячейка</td>
            <td>Ячейка</td>
            <td>Ячейка</td>
        </tr>
    </tbody>
</table>

Утилиты

Для оптимизации отображения ячеек таблицы и их конкретного содержимого вы можете добавить один из следующих классов.

Класс Описание
.uk-table-link Чтобы связать всю ячейку, добавьте этот класс к элементам <th> или <td> и вставьте элемент <a>. Добавьте класс .uk-link-reset из компонента Ссылки для сброса стандартной стилизации ссылок.
.uk-preserve-width Так как изображения в UIkit 3 по умолчанию являются адаптивными, использование изображения внутри ячейки таблицы с классом .uk-table-shrink уменьшит ширину изображения до 0. Для отмены такого поведения добавьте класс .uk-preserve-width из компонента Основы к элементу <img>.
.uk-text-truncate При применении фиксированной ширины к ячейке таблицы, вы можете добавить этот класс из компонента Текст к элементу <td> для усечения текста.
.uk-text-nowrap Добавьте этот класс из компонента Текст, чтобы предотвратить перенос текста, например, при использовании класса .uk-table-shrink. 
<!-- Table link -->
<td class="uk-table-link">
    <a class="uk-link-reset" href=""></a>
</td>

<!-- Preserve width -->
<td>
    <img class="uk-preserve-width">
</td>

<!-- Text truncate -->
<td class="uk-text-truncate"></td>

<!-- Text nowrap -->
<td class="uk-text-nowrap"></td>
  • Preserve Expand + Link Truncate Shrink + Nowrap
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor 
  • <div class="uk-overflow-auto">
    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
        <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">Preserve</th>
                <th class="uk-table-expand">Expand + Link</th>
                <th class="uk-width-small">Truncate</th>
                <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
        </tbody>
    </table>
</div>

Все варианты работы таблиц смотрите в разделе примеры таблиц.