Компонент Таблица

Создавайте красивые адаптивные таблицы и добавляйте к ней разные стили. Таблица с эффектом «Зебра» стопкой на маленьких экранах. Вертикальное выравнивание содержимого таблицы.

Table: Создание

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

<table class="uk-table">
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>
Заголовок таблицы описывающий ее содержание
Заголовок таблицы Заголовок таблицы Заголовок таблицы
Данные таблицы Данные таблицы Данные таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы
Нижний колонтитул Нижний колонтитул Нижний колонтитул 
<table class="uk-table">
    <caption>Заголовок таблицы описывающий ее содержание</caption>
    <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>
    </tbody>
    <tfoot>
        <tr>
            <td>Нижний колонтитул</td>
            <td>Нижний колонтитул</td>
            <td>Нижний колонтитул</td>
        </tr>
    </tfoot>
</table>

Модификатор «Divider»

Таблица с разделителем между строками

Для отображения вертикального разделителя между строками создаваемой таблицы добавьте класс .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 class="uk-text-center">
            <td colspan="3">
            	<time datetime="2022-05-21 11:00">21 мая</time>
            </td>
        </tr>
        <tr>
            <td>Геометрической таблицы</td>
            <td>Вводится целесообразность</td>
            <td>Параллельный прогресс</td>
        </tr>
    </tbody>
</table>

Модификатор «Striped»

Таблица с эффектом «Зебра»

В данном разделе мы стилизуем HTML таблицу по типу чередование цвета строк. Добавив таблице класс .uk-table-striped таблица примет эффект чередование "Зебра", что упрощает просмотр представленных данных по строкам. 

<table class="uk-table uk-table-striped">...</table>
Невероятная Зебра Эффект чередование Модификатор Striped
Зебра ячейка Действие отбора Удивительным образом
Ячейка преимуществ Вопрос разрешим Существенные части
Ячейка Зебра Отдельное изменение Необходимо отражается 
<table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Невероятная Зебра</th>
            <th>Эффект чередование</th>
            <th>Модификатор Striped</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Зебра ячейка</th>
            <td>Действие отбора</td>
            <td>Удивительным образом</td>
        </tr>
        <tr>
            <th>Ячейка преимуществ</th>
            <td>Вопрос разрешим</td>
            <td>Существенные части</td>
        </tr>
        <tr>
            <th>Ячейка Зебра</th>
            <td>Отдельное изменение</td>
            <td>Необходимо отражается</td>
        </tr>
    </tbody>
</table>

Модификатор «Hover»

Эффект «Наведение»

Таблица со стилем при наведении может привлекать внимание и менять стиль строки при наведении на неё курсора мыши. Добавьте класс .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 class="uk-text-center" colspan="2">
            	Данные достижения <time datetime="2024-08-27">вчера</time>
            </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 class="uk-text-center" colspan="2">
            	<time datetime="2023-10-17">17</time>
            </td>
            <td>Приобретенные свойства</td>
        </tr>
    </tbody>
</table>

Модификатор «Justify»

Убираем боковые отступы в таблице

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

<table class="uk-table uk-table-justify">...</table>
Заголовок таблицы Заголовок столбца Кнопочный заголовок
Данные таблицы Он ничего не сказал, а лишь поднял руку и погладил ее по щеке. Она с удивлением ахнула. Она разрывалась между желанием, которое несомненно испытывала.
Известно, что Если вы вдруг себя плохо почувствовали, сожмите виски пальцами и начинайте медленно вращать по часовой стрелке... А затем выпейте содержимое. 
<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>Он ничего не сказал, а лишь поднял руку и погладил ее по щеке. Она с удивлением ахнула. Она разрывалась между желанием, которое несомненно испытывала.</td>
            <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
        </tr>
        <tr>
            <td>Известно, что</td>
            <td>Если вы вдруг себя плохо почувствовали, сожмите виски пальцами и начинайте медленно вращать по часовой стрелке... А затем выпейте содержимое.</td>
            <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
        </tr>
    </tbody>
</table>

Модификатор «Выравнивание»

Вертикальное выравнивание

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

<table class="uk-table uk-table-middle">...</table>
Заголовок таблицы Заголовок таблицы Заголовок таблицы
Данные таблицы Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигма тическая страна, в которой жаренные члены предложения залетают прямо в Lorem.
Данные таблицы Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфо графичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum. 
<table class="uk-table uk-table-middle uk-table-divider">
    <thead>
        <tr>
            <th class="uk-width-small">Заголовок таблицы</th>
            <th class="uk-table-middle">Заголовок таблицы</th>
            <th>Заголовок таблицы</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные таблицы</td>
            <td>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигма тическая страна, в которой жаренные члены предложения залетают прямо в Lorem.</td>
            <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
        </tr>
        <tr>
            <td>Данные таблицы</td>
            <td>Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфо графичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.</td>
            <td><button class="uk-button uk-button-default" type="button">Кнопка</button></td>
        </tr>
    </tbody>
</table>

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

Отзывчивая таблица с горизонтальной полосой прокрутки

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

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

Измените размер окна браузера, чтобы увидеть стопку из столбцов таблицы.

Стопкой таблица Складываемая таблица Таблица конструктор
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3 
<table class="uk-table uk-table-responsive uk-table-divider">
    <thead>
        <tr>
            <th>Стопкой таблица</th>
            <th>Складываемая таблица</th>
            <th>Таблица конструктор</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Ячейка 1.1</th>
            <td>Ячейка 1.2</td>
            <td>Ячейка 1.3</td>
        </tr>
        <tr>
            <th>Ячейка 2.1</th>
            <td>Ячейка 2.2</td>
            <td>Ячейка 2.3</td>
        </tr>
        <tr>
            <th>Ячейка 3.1</th>
            <td>Ячейка 3.2</td>
            <td>Ячейка 3.3</td>
        </tr>
    </tbody>
</table>

Модификатор «Ширина»

Модификатор «Ширина столбца или ячейки»

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

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

<!-- Сохранение ширины -->
<td>
    <img class="uk-preserve-width" width="" height="" alt="">
</td>

<!-- Усечение текста -->
<td class="uk-text-truncate"></td>

<!-- Текст nowrap -->
<td class="uk-text-nowrap"></td>
Preserve Expand + Link Truncate Shrink + Nowrap
Аватарка Ссылка и распределённое пространство, adipiscing sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Аватарка Нажималка и распределённое пространство, sed do eiusmod tempor ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Аватарка Кликалка и распределённое пространство, consectetur adipiscing, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor
Аватарка Ссылка и оставшееся пространство, 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 class="uk-table-middle" rowspan="2">
	            	<input class="uk-checkbox" type="checkbox" aria-label="Check">
	        	</td>
	            <td><img class="uk-preserve-width uk-border-circle" src="images/ava/avatar-1.webp" width="40" height="40" loading="lazy" alt="Аватарка"></td>
	            <td class="uk-table-link">
	                <a class="uk-link-reset" href="">Ссылка и распределённое пространство, adipiscing 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><img class="uk-preserve-width uk-border-circle" src="images/ava/avatar-1.webp" width="40" height="40" loading="lazy" alt="Аватарка"></td>
	            <td class="uk-table-link">
	                <a class="uk-link-reset" href="">Нажималка и распределённое пространство, sed do eiusmod tempor ipsum dolor.</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" aria-label="Check"></td>
	            <td><img class="uk-preserve-width uk-border-circle" src="images/ava/avatar-1.webp" width="40" height="40" loading="lazy" alt="Аватарка"></td>
	            <td class="uk-table-link">
	                <a class="uk-link-reset" href="">Кликалка и распределённое пространство, consectetur adipiscing, 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" aria-label="Check"></td>
	            <td><img class="uk-preserve-width uk-border-circle" src="images/ava/avatar-1.webp" width="40" height="40" loading="lazy" alt="Аватарка"></td>
	            <td class="uk-table-link">
	                <a class="uk-link-reset" href="">Ссылка и оставшееся пространство, 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>