Таблицы — один из популярных способов структурировать и визуализировать данные на сайте. Однако стандартные HTML-таблицы часто не адаптируются под мобильные устройства, что ухудшает пользовательский опыт. В этой статье мы подробно разберем, как создать адаптивные таблицы в WordPress, рассмотрим готовые плагины и приведем примеры кастомного кода для решения задачи.
Почему адаптивность таблиц важна для WordPress сайтов
С ростом мобильного трафика важно, чтобы контент корректно отображался на экранах разного размера. Таблицы, особенно с большим количеством столбцов, могут выходить за пределы экрана, вызывая горизонтальную прокрутку или обрезание данных. Это неудобно и снижает конверсию. Поэтому адаптивные таблицы делают данные читабельными и удобными для пользователей любых устройств.
Адаптивность достигается с помощью CSS, JavaScript или специальных плагинов, которые автоматически преобразуют таблицы в удобный формат, например, карточки или с возможностью прокрутки.
Использование плагинов для адаптивных таблиц в WordPress
Для быстрого решения задачи существуют популярные плагины, которые помогут сделать таблицы адаптивными без сложного программирования.
1. TablePress с расширением Responsive Tables
TablePress — один из самых популярных плагинов для создания таблиц в WordPress. По умолчанию он не адаптивен, но с помощью расширения Responsive Tables можно добавить адаптивность.
- Установка TablePress и активируйте плагин.
- Скачайте и активируйте расширение Responsive Tables.
- В настройках таблицы включите опцию адаптивности.
Плагин автоматически преобразует таблицы, добавляя горизонтальную прокрутку или изменяя структуру для смартфонов.
2. WP Table Builder
WP Table Builder — конструктор таблиц с поддержкой адаптивности из коробки. Позволяет создавать таблицы с помощью drag-and-drop, удобно для новичков.
- Поддержка различных типов контента в ячейках (текст, изображения, кнопки).
- Автоматическое сжатие таблиц под мобильные экраны.
- Возможность экспорта/импорта таблиц.
Плагин отлично подходит, если нужно быстро создать красивые и адаптивные таблицы с минимальными усилиями.
Кастомные решения: адаптивные таблицы с помощью CSS и JavaScript
Если вы хотите гибко контролировать внешний вид и поведение таблиц, лучше использовать собственные стили и скрипты. Рассмотрим несколько методов.
Метод 1: Горизонтальная прокрутка
Самый простой способ — обернуть таблицу в контейнер с прокруткой:
<div class="wpnotes-responsive-table">
<table>
...
</table>
</div>И добавить CSS:
.wpnotes-responsive-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}Это позволит показывать всю таблицу с возможностью прокрутки по горизонтали, не ломая верстку.
Метод 2: Таблицы в стиле карточек с помощью CSS
Более сложный, но удобный способ — менять таблицы на набор карточек на мобильных устройствах. Пример CSS:
@media (max-width: 768px) {
table.wpnotes-table,
thead,
tbody,
th,
td,
tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 10px;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
font-weight: bold;
}
}Тогда в HTML для каждой ячейки добавляем атрибут data-label с названием колонки. Это позволяет отображать таблицу как список карточек с подписями, удобно для чтения на узких экранах.
Автоматизация добавления атрибутов data-label в WordPress с помощью функции
Чтобы не менять вручную таблицы, можно написать PHP-функцию для фильтрации контента и добавления этих атрибутов. Пример функции wpnotes_add_data_labels_to_tables():
function wpnotes_add_data_labels_to_tables( $content ) {
if ( false === strpos( $content, '<table' ) ) {
return $content;
}
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
$tables = $dom->getElementsByTagName('table');
foreach ($tables as $table) {
$headers = [];
$thead = $table->getElementsByTagName('thead')->item(0);
if ($thead) {
$ths = $thead->getElementsByTagName('th');
foreach ($ths as $th) {
$headers[] = trim($th->textContent);
}
} else {
$firstRow = $table->getElementsByTagName('tr')->item(0);
if ($firstRow) {
$ths = $firstRow->getElementsByTagName('th');
if ($ths->length > 0) {
foreach ($ths as $th) {
$headers[] = trim($th->textContent);
}
} else {
$tds = $firstRow->getElementsByTagName('td');
foreach ($tds as $td) {
$headers[] = '';
}
}
}
}
$tbody = $table->getElementsByTagName('tbody')->item(0);
if (!$tbody) {
$tbody = $table;
}
foreach ($tbody->getElementsByTagName('tr') as $tr) {
$cells = $tr->getElementsByTagName('td');
for ($i = 0; $i < $cells->length; $i++) {
$header = isset($headers[$i]) ? $headers[$i] : '';
if ($header) {
$cells->item($i)->setAttribute('data-label', $header);
}
}
}
}
return $dom->saveHTML();
}
add_filter('the_content', 'wpnotes_add_data_labels_to_tables', 20);Эта функция автоматически добавит атрибуты data-label ко всем ячейкам таблиц в контенте, используя заголовки колонок из <thead> или первой строки.
Рекомендации по выбору метода адаптивных таблиц
Выбор способа зависит от задач и объема данных:
- Горизонтальная прокрутка — простой и быстрый метод, подходит для больших таблиц с множеством столбцов, когда важно сохранить структуру.
- Карточки с CSS — лучше для небольших таблиц, где важна удобочитаемость и мобильный UX, но требует дополнительной верстки.
- Плагины — оптимальны для тех, кто не хочет писать код, обеспечивают удобный интерфейс и дополнительные функции (сортировка, фильтрация).
Комбинируя эти методы, можно добиться идеального результата для вашего WordPress сайта.
Заключение
Адаптивные таблицы — необходимый элемент современного сайта на WordPress, если вы работаете с табличными данными. Используйте плагины TablePress с расширением Responsive Tables или WP Table Builder для быстрого результата, либо применяйте кастомные стили и PHP-функции для полного контроля. В любом случае, ваши таблицы будут удобны как на десктопах, так и на мобильных устройствах.