Плагин WordPress для таблиц

Я всегда делал таблицы по всем канонам html, но оказывается я был не прав.
И сейчас объясню почему.

Как сделать таблицу в html

Правильная, с точки зрения html, таблица выглядит следующим образом.

Код:

<table>
 <caption>Наименование таблицы</caption>
  <tr>
   <th>Заголовок 1</th>
   <th>Заголовок 2</th>
   <th>Заголовок 3</th>
   <th>Заголовок 4</th>
  </tr>
  <tr>
   <td>Строка 1 Столбец 1</td>
   <td>Строка 1 Столбец 2</td>
   <td>Строка 1 Столбец 3</td>
   <td>Строка 1 Столбец 4</td>
  </tr>
  <tr>
   <td>Строка 2 Столбец 1</td>
   <td>Строка 2 Столбец 2</td>
   <td>Строка 2 Столбец 3</td>
   <td>Строка 2 Столбец 4</td>
  </tr>
</table>

На экране компьютера:

Наименование таблицы
Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4
Строка 1 Столбец 1 Строка 1 Столбец 2 Строка 1 Столбец 3 Строка 1 Столбец 4
Строка 2 Столбец 1 Строка 2 Столбец 2 Строка 2 Столбец 3 Строка 2 Столбец 4

Такая таблица обладает даже некоторой адаптивностью (при использовании адаптивной темы WordPress, например как эта) — при уменьшении области просмотра колонки сдвигаются ближе друг к другу насколько возможно, слова в колонках переформатируются в столбик.

И это все что может сделать адаптивная тема с таблицей: если колонок много — ни об какой адаптивности не может идти речи. Посмотрите как такая таблица выглядит на смартфоне:

Неадаптивная таблица на экране смартфона

Чтобы сделать скриншот на смартфоне Samsung Galaxy, одновременно нажмите и подержите одну-две секунды клавиши «Домой» и «Питание».
    Дальше пошли еще минусы:

  • по умолчанию она не очень хорошо смотрится — шрифт мельче основного текста, не подсвечены строки через одну и т.д.;
  • и самое главное, в нее очень трудоемко вносить данные — попробуйте в коде внести значение 100 ячеек и не ошибиться.

Плагин TablePress

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

    В первую очередь было важно, чтобы таблички были:

  • красивыми;
  • адаптивными (одинаково хорошо выглядели и на мониторе, и на смартфоне, и на планшете);
  • в них легко импортировались данные;
  • и такие такие второстепенные критерии, как: большое количество активных установок и много хороших отзывов.

Установить плагин TablePress можно с официального репозитория WordPress:

Установить плагин TablePress

Как видим более 700 тыс. активных установок, 3 334 положительных отзыва и регулярное обновление (последнее обновление было 5 дней назад) — это о многом говорит.

Пока плагин создает неадаптивные таблички, а чтобы превратить их в адаптивные, скачиваем с сайта TablePress дополнительный плагин Responsive Tables и устанавливаем его. Не смотрим что там просят 9$, это добровольные пожертвования автору.

Responsive Tables

Как пользоваться Tablepress

Создаем свою первую таблицу в Tablepress и вставляем ее шорткодом:

Зaгoлoвoк 1Зaгoлoвoк 2Зaгoлoвoк 3Зaгoлoвoк 4
Строка 1 Столбец 1Cтpoкa 1 Cтoлбeц 2Cтpoкa 1 Cтoлбeц 3Cтpoкa 1 Cтoлбeц 4
Cтpoкa 2 Cтoлбeц 1Cтpoкa 2 Cтoлбeц 2Cтpoкa 2 Cтoлбeц 3Cтpoкa 2 Cтoлбeц 4

И смотрим как она выглядит на экране смартфона:

Адаптивная таблица на экране смартфона

Видим только часть таблицы, но внизу появился движок и теперь тачскрином смартфона мы можем двигать таблицу вправо-влево (соответственно на компьютере это делается мышкой).

Настраиваем плагин

Можно настроить как параметры, так и внешний вид таблицы: выбрать шрифт, его размер и цвет, определить фон и т.д.

Параметры таблицы

    В этом разделе можно изменить:

  • Строка заголовка. Если первая строка таблицы у вас название колонок — рекомендую включить эту опцию. При этом заглавная строка выделиться жирным и в ней поменяется цвет фона.
  • Строка итога. Рекомендую включать когда в последней строке идет подсчет итоговых результатов или средних значений.
  • Чередующийся цвет строк. При включенном параметре будет чередоваться фон строк. Рекомендую включить, чтобы таблица не казалось скучной на простом белом фоне.
  • Менять цвет строки под курсором. Чтобы таблица казалась более динамичной, включите данный параметр и, когда вы будите проводить курсором мыши над строчкми — они будут немного менять цвет фона. Очень интересное решение.
  • Показывать название таблицы пользователю. При включенном параметре будет отображаться название таблицы (сверху или снизу) как заголовок H2 (включая теги, размер и центрирование). Это не очень хорошо с точки зрения SEO, только поэтому данную функцию я не использую.
  • Показывать описание таблицы пользователю. Будет показываться описание, введенное на этапе создания таблицы. Оно будет отображаться сверху или снизу по умолчанию простым текстом (что мне не понравилось, так как описание будет сливаться с текстом статьи). В принципе это можно поправить прямо в поле ввода описания, задав там размер, цвет и расположение вручную кодами html).

Настройка функции DataTables JavaScript

Здесь можно настроить сортировку, выборку, разбивку данных таблицы и многое другое при работе со сложными таблицами.

    В информационных сайтах это обычно не применяется и поэтому я включил только:

  • «Использовать в этой таблице активные функции DataTables JavaScript»;
  • «Включить горизонтальную прокрутку, чтобы облегчить просмотр широких таблиц».
  • без которых невозможно реализовать адаптивность таблиц.

Параметры интерфейса

    Данные настройки находятся в разделе «Опции» и помогают настроить оформление таблицы:

  • поменять цвет фона;
  • выбрать шрифт;
  • изменить его размер;
  • цвет;
  • и многое другое.

Для этого в соответствующее поле необходимо поместить CSS пользователя.

Стилей очень много, поменять можно практически все. Приведу только пример стилей которые использую сам:

/* Tablepress Стили для ячеек заголовка */
.tablepress tfoot th,
.tablepress thead th {
	background-color: #d9edf7; /* Цвет фона главной строки*/
	font-family : Tahoma ; /* Шрифт*/
	font-size: 14px; /* Размер шрифта*/
}
/* Tablepress Стили для ячеек самой таблицы */
.tablepress tbody td { 
	font-family : Tahoma ; /* Шрифт*/
	font-size :  14px ; /* Размер шрифта*/
}

Если какой-то параметр вам менять не нужно (например цвет фона заголовка) — просто сотрите нужную строчку с стиле CSS.

При желании можно сжать CSS одним из сервисов, например: csscompressor.com

Полное описание пользовательских стилей CSS можно найти на странице Часто задаваемые вопросы (FAQ) плагина Tablepress.

Импорт данных

Ну и теперь самое «вкусное» — как легко стало вводить данные. Если раньше я создавал таблицу вручную на HTML и потом мучительно долго вносил данные в каждую ячейку, то теперь просто копирую данные понравившейся мне таблички прямо в статье и импортирую как CSV в соответствующем поле. Все, дело пары секунд.

    Способов импорта множество:

  • CSV;
  • HTML;
  • JSON;
  • XLS (Microsoft Excel).

Например можно импортировать крутые таблицы с кнопками и другим оформлением выделив кусок кода от <table> до </table> и вставив в режиме HTML.

При импорте таблицу заранее создавать не нужно — плагин сам создаст ее в процессе импорта.

Баги и фичи

1. На некоторых темах WordPress не работают пользовательские CSS для TablePress. Вставляешь в соответствующее поле CSS, например для изменения размера шрифта, и ничего не происходит. Ответ нашелся на форуме поддержки Tablepress. Вот ответ разработчика плагина Tobias Bäthge:
«Причина этого заключается в том, что что-то на вашем сайте (плагин или ваша тема) отключает загрузку файлов CSS TablePress.»

В этом случае ищем поле для пользовательского CSS в самой теме WordPress и прописываем туда стили. В теме WP Jarida — это поле «Custom CSS» в настройках.

2. Если включить в настройках плагина «Показывать название таблицы пользователю», то название таблицы отобразится как заголовок H2.

  • во первых, зачем нам лишний заголовок?
  • да и это название появиться в Содержании (как и любой другой H2).

Исправить это к сожалению никак нельзя (без правки кода самого плагина). Как альтернативу можно использовать не название таблицы, а описание, которое можно вывести сверху/снизу таблицы.

3. При импорте (в формате CSV) числовых данных содержащих запятую происходит неправильное разделение на ячейки. Так как плагин в качестве разделительного символа использует точку с запятой, запятую или табуляцию.

Выход — скопированные данные промежуточно сохраняем в Excel (импорт туда происходит вполне корректно). И импортируем в плагин из сохраненной Книги Excel.

Оцените, пожалуйста, статью, я старался :) (голосов: 1, оценка: 5,00 из 5)

Задайте вопрос в комментариях

6 − 1 =