Как создать адаптивные таблицы в WordPress

Таблицы — важный элемент для отображения структурированных данных на сайте. Однако стандартные HTML-таблицы плохо адаптируются под мобильные устройства и узкие экраны. В этой статье рассмотрим, как создавать адаптивные таблицы в WordPress, чтобы они корректно отображались на любых устройствах и улучшали пользовательский опыт.

Почему стандартные таблицы не подходят для мобильных

Обычные таблицы имеют фиксированную структуру: строки и столбцы, которые трудно уместить на узких экранах без горизонтальной прокрутки. Это ухудшает читаемость и может отпугнуть посетителей. Поэтому важно применять методы, которые позволяют таблицам «гнуться» и менять формат в зависимости от ширины экрана.

Основные проблемы стандартных таблиц на мобильных:

• Неудобный горизонтальный скролл.
• Перекрытие текста и столбцов.
• Плохая читаемость информации.

Давайте рассмотрим, как решить эти задачи.

Методы создания адаптивных таблиц в WordPress

1. Использование CSS для адаптивности

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

Пример CSS для адаптивных таблиц:

@media only screen and (max-width: 600px) {
  table.wpstudy-table, table.wpstudy-table thead, table.wpstudy-table tbody, table.wpstudy-table th, table.wpstudy-table td, table.wpstudy-table tr {
    display: block;
  }
  table.wpstudy-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  table.wpstudy-table tr { border: 1px solid #ccc; margin-bottom: 5px; }
  table.wpstudy-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  table.wpstudy-table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    content: attr(data-title);
  }
}

Чтобы этот CSS работал, нужно в <td> добавить атрибут data-title с названием столбца. Это можно сделать вручную в HTML или программно при выводе таблиц.

2. Автоматическое добавление атрибутов data-title с помощью PHP

Если таблицы формируются динамически, можно использовать фильтр WordPress для добавления атрибутов. Пример функции, которая обрабатывает контент с таблицами и добавляет атрибуты:

function wpstudy_add_data_title_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) {
    $thead = $table->getElementsByTagName('thead')->item(0);
    if (!$thead) continue;
    $headers = [];
    $thList = $thead->getElementsByTagName('th');
    foreach ($thList as $th) {
      $headers[] = trim($th->textContent);
    }

    $tbody = $table->getElementsByTagName('tbody')->item(0);
    if (!$tbody) continue;
    foreach ($tbody->getElementsByTagName('tr') as $tr) {
      $tds = $tr->getElementsByTagName('td');
      foreach ($tds as $index => $td) {
        if (isset($headers[$index])) {
          $td->setAttribute('data-title', $headers[$index]);
        }
      }
    }
  }

  return $dom->saveHTML();
}
add_filter('the_content', 'wpstudy_add_data_title_to_tables');

Эта функция парсит HTML контент статьи, находит таблицы с заголовками и добавляет в ячейки атрибут data-title с названием столбца. После подключения этого кода CSS из предыдущего пункта сделает таблицы адаптивными.

3. Плагины для адаптивных таблиц

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

• TablePress — популярный плагин для создания и управления таблицами. Для адаптивности можно подключить расширение Responsive Tables, которое позволяет добавлять сворачивающиеся блоки и прокрутку.
• WP Table Builder — визуальный конструктор таблиц с поддержкой адаптивности, удобен для новичков.
• Data Tables Generator by Supsystic — мощный плагин с множеством настроек, включая адаптивный режим.

Например, для TablePress после установки можно активировать расширение и в настройках таблицы включить адаптивный режим. Подробнее о плагине и его расширениях можно узнать на официальной странице TablePress.

Дополнительные советы по улучшению адаптивности таблиц

Использование горизонтальной прокрутки

Иногда проще оставить таблицу как есть, но обернуть её в контейнер с горизонтальной прокруткой:

.wpstudy-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Оборачивайте таблицы в блок с классом wpstudy-table-wrapper, чтобы на мобильных появлялась возможность прокрутки по горизонтали без нарушения верстки.

Минимизация количества столбцов

Чем меньше столбцов, тем проще адаптировать таблицу. Если возможно, объединяйте колонки или выводите важные данные в первую очередь. Для WordPress можно добавить управление видимостью столбцов через пользовательский интерфейс или плагин.

Использование шорткодов с параметрами

Если вы используете плагин для создания таблиц, проверяйте, есть ли возможность передавать параметры адаптивности через шорткод. Например, TablePress поддерживает дополнительные параметры для включения адаптивности.

Пример полной адаптивной таблицы с кастомным выводом

Вот пример HTML таблицы с атрибутами data-title для адаптивности и классом wpstudy-table:

<table class="wpstudy-table">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Имя">Иван</td>
      <td data-title="Возраст">28</td>
      <td data-title="Профессия">Разработчик</td>
    </tr>
    <tr>
      <td data-title="Имя">Ольга</td>
      <td data-title="Возраст">34</td>
      <td data-title="Профессия">Дизайнер</td>
    </tr>
  </tbody>
</table>

При подключении CSS из первого раздела эта таблица будет отлично смотреться на мобильных: строки станут блочными, а названия столбцов будут отображаться перед значениями.

Заключение по теме адаптивных таблиц

Создание адаптивных таблиц в WordPress — задача, требующая внимания к деталям. Использование CSS с атрибутами data-title — универсальный и гибкий способ, который можно дополнить автоматизацией на PHP. Если вы предпочитаете готовые решения, плагины TablePress и WP Table Builder отлично справляются с задачей.

Для расширенных нужд и кастомизации рекомендуем комбинировать методы: автоматическое добавление атрибутов, пользовательские стили и удобные плагины. Это позволит сделать ваши таблицы удобными и красивыми на всех устройствах.