Создание красивых таблиц для сайта с TablePress

Привет, друзья!

Сегодня расскажу вам про создание таблиц для сайта с плагином TablePress.

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

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

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

Решил предоставить вам сначала яркий пример, который создается за 1-2 минуты. Таблица получилась одновременно простая и красивая. И это с учетом того, что делается все на одном дыхании. Не нужно работать ни с каким табличными тегами. Плагин сам все создает. Необходимо лишь добавить нужное количество строк и колонок, а затем заполнить каждую ячейку.

В общем, вот пример таблицы на основе данных развития сайта.

Месяц	Посетители с поиска	Посетители с сайтов	Прямые заходы	Посетители с социальных сетей	Посетители с Youtube	В общем за месяц
Октябрь 2014	3	37	86	0	0	126
Ноябрь 2014	44	376	426	2	5	853
Декабрь 2014	80	208	259	8	7	562
Январь 2015	151	152	227	3	19	552
Февраль 2015	373	309	370	4	19	1094
Март 2015	1140	165	700	5	32	2042
Апрель 2015	1867	91	840	12	41	2851
Май 2015	4182	73	1120	8	39	5422
Июнь 2015	3747	90	1131	9	51	5028
Июль 2015	5298	93	1488	15	56	6950
Август 2015	6527	103	1401	39	72	8142
Сентябрь 2015	8138	133	1940	39	85	10335
Октябрь 2015	10249	183	2697	80	104	13583
Ноябрь 2015	12028 (+17,35%)	153 (-16%)	2762 (+2,41%)	72 (-10%)	81 (-22%)	15096 (+11,13%)
Декабрь 2015	12996 (+8,04%)	124 (+29,8%)	3551 (+28,5%)	102 (+42%)	83 (+2,5%)	16796 (+11,26%)
Январь 2016	12830 (-1,2%)	161 (-19%)	3890 (+9,5%)	75 (-26,5%)	60 (-27,7%)	17016 (+1,3%)
Февраль 2016	15423 (+20,2%)	211 (+31,05%)	3992 (+2,6%)	86 (+14,6%)	100 (+66,6%)	19812 (+16,4%)
Март 2016	17207 (+11,5%)	205 (-2,8%)	4743 (+18,8%)	134 (+55,8%)	61 (-39%<1em>)	22350 (+12,8%)
Месяц	Посетители с поиска	Посетители с сайтов	Прямые заходы	Посетители с социальных сетей	Посетители с Youtube	В общем за месяц

Такую простую таблицу я сделал за 10 минут. Это с учетом того, что минут 8 мне пришлось смотреть в систему отслеживания статистики и делать выборку для каждого месяца по каждому показателю.

В остальном же пришлось только заполнить ячейки и сохранить изменения.

Это не все, что может плагин TablePress. Настроек у него гораздо больше. Давайте теперь к нему перейдем и рассмотрим все его особенности.

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

Плагин абсолютно бесплатный. Скачать его можно с [urlspan]официального сайта[/urlspan].

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

Добавление новой таблицы происходит через админ-панель WordPress в новом пункте меню «TablePress».

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

Но также их можно вывести и на странице сайта, если будет нужно. Рассмотрим это далее.

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

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

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

Вставку можно также сделать с помощью пиктограммы, которая добавляется в редактор WordPress после установки плагина.

После клика по пиктограмме вам отобразится кнопка для вставки шорткода.

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

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

Настройки TablePress

Сначала рассмотрим работу с самой таблицей, а потом другие возможности плагина.

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

Достигается это в расширенном редакторе ячейки. Стоит сначала нажать на кнопку «Расширенный редактор», потом кликнуть на нужную ячейку.

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

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

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

Порядок действий такой же:

1. Нажимаем на нужную кнопку;
2. Выбираем нужную ячейку;
3. Производим форматирование.

Далее можно объединять соседние ячейки, чтобы подсчитывать в них какие-то средние значения. Как правило, в таких случаях делается одна общая строка или общая колонка. Нет нужды делать разбиение на несколько ячеек. В этом случае используются функции объединения ячеек по вертикали и горизонтали.

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

1. Заполнить содержимое только левой из 2х ячеек;
2. Кликнуть на кнопку «к левой» и выбрать правую ячейку, чтобы в правой появился тег #colspan#.

Тоже самое и с соединением по вертикали. Только нужно заполнить содержимое верхней ячейки, нажать на кнопку «к верхней» и выбрать нижнюю ячейку, чтобы в нее добавился тег #colspan#.

В блоке «Работа с таблицей» можно также дублировать необходимые строки с колонками, а также добавлять новые или удалять уже существующие.

Далее мы переходим к параметрам. Даю вам скриншот всех функций блока с параметрами, а потом опишу каждый.

• Строка заголовка — включив этот параметр, самая первая строка будет выделяться соответствующими стилями плагина. Это требуется, чтобы указать на заглавную строку таблицы, где вписывается название колонок;
• Строка итога — тоже самое, только для самой последней строки. Требуется, когда в последней строке идет подсчет итоговых результатов или средних значений. Но также можно и просто делать последнюю строку главной, дублируя в ней все те же названия колонок. Смотрите на мой пример, в котором я так и сделал;
• Чередующийся цвет строк — я рекомендую включать, чтобы таблица не казалось скучной на простом белом или каком-то другом фоне. При включенном параметре будет чередоваться фон строк;
• Менять цвет строки под курсором — чтобы таблица казалась более динамичной, можно включить данный параметр и, когда мы будем наводить курсор мыши на строчки, то они будут немного менять цвет фона. Также очень интересное и правильное решение;
• Показывать название таблицы пользователю — при включенном параметре будет отображаться ее название, которое мы задавали в самом начале в процессе ее добавления. Название будет выводиться сверху или снизу (в зависимости от выбранного вами варианта) в заголовке второго уровня H2, что мне не очень понравилось. Поэтому данную функцию я не стал использовать;
• Показывать описание таблицы пользователю — будет показывать описание, введенное на том же первоначальном этапе ее создания. Описание будет отображаться простым текстом сверху или снизу. Мне это тоже не понравилось, так как описание будет сливаться с текстом статьи. Но, конечно же можно доработать оформление плагина и тогда оно будет отличаться. Но я пока не стал лезть в оформление;
• Групповые классы CSS — скажу честно, сам не разобрался для чего нужно данное поле и как им пользоваться. Не пойму на что оно влияет.

Итак, далее идут параметры Javascript, которые позволяют сделать таблицу не просто каким-то набором данных для представления их аудитории, а сделать из нее динамический тип контента, которым можно управлять, делать поиск, сортировку данных и так далее. В некоторых случаях это очень полезно делать и посетители непременно оценят.

• Использование активных функций DataTables — включает весь функционал, который работает через javascript;
• Сортировка — позволяет производить сортировку данных в таблице вашими посетителям. На практике к главной строке будут добавляться маркеры, которыми можно производить сортировку;
• Выборка — данный параметр должен позволить показывать в таблице только то, что выберет сам посетитель. Только то, что ему нужно. Я активировал чек-бокс и не увидел никаких изменений;
• Разбивка таблицы на страницы — если таблица слишком большая, то целесообразно разбивать ее на список страниц, чтобы она не занимала слишком много места в контенте. Тогда под таблицей будут ссылки для перехода к следующей и предыдущей странице из списка;
• Изменение разбивки страницы пользователем — позволяет пользователю самому решать, сколько строк будет отображаться на одной странице данных. Активировав данный параметр, появится соответствующая функция для выбора количество строк;
• Информация — отображение информации о количестве отображаемых строк в таблице и общем их количестве;
• Горизонтальная прокрутка — понадобится, если в наличии имеется очень много колонок, которые могут не вместиться в область контента страницы. Чтобы просмотр был более легким для восприятия, стоит включить горизонтальную прокрутку;
• Команды пользователя — можно прописать отдельные функции, чтобы пользователь мог более гибко управляться с данными в таблице. Я считаю, что в обычном использовании данные параметры применять не стоит.

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

Теперь рассмотрим оставшиеся возможности плагина.

Опции плагина

В плагине имеются вкладки:

• Все таблицы — список всех созданных, сами знаете чего);
• Новая — создание новой таблицы;
• Импорт — импорт таблицы из готового файла, например из Excel;
• Экспорт — аналогично, только выгрузка из плагина в готовый файл на компьютер;
• Опции — дополнительные параметры, которые сейчас и рассмотрим;
• О плагине — описание расширения.

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

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

Если вы посмотрите на мой пример в начале статьи, то заметите, что в таблице у меня шрифт меньше, чем в контентной области сайта, и цвет другой (черный). Этого я достиг введением пользовательских CSS стилей в параметры интерфейса на вкладке «Опции»

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

Если что, то дам вам эти стили, может пригодятся.

.tablepress tbody td {
vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
}

.tablepress td,
.tablepress th {
text-align: center; /* Выравнивание текста - по центру*/
}

/* Стили для ячеек главной строки */
.tablepress tfoot th,
.tablepress thead th {
background-color: #d9edf7; /* Цвет фона главной строки*/
font-weight: 700;
vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
}

/* Стили для основных ячеек*/
.tablepress td,
.tablepress th {
padding: 8px; /* Внутренние отступы от краев ячеек*/
border: none;
background: 0 0;
float: none !important;
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
}

С помощью пользовательских стилей можно изменить абсолютно все параметры таблицы:

• размер шрифта, цвет, семейство шрифта;
• фон строк в статическом режиме и при наведении;
• фон главной страницы;
• выравнивание текста внутри ячеек и так далее.

Стили, которые я дал, не захватывают весь спектр изменений. Я лишь добавил те CSS классы, которые мне нужно было доработать. Вам же, возможно, придется добавить еще какие-то классы, если захотите изменить оформление более кардинально. Но эти стили придется вам найти уже самим. Если вдруг возникнут непреодолимые сложности, то жду в комментариях. Постараюсь помочь.

Все важные строки я подписал, чтобы вы понимали за что отвечает каждое свойство. С их помощью уже можно изменить стандартное оформление.

Ну что же, ребята. Сделан еще один мануал из обширной темы про оформление и структуризацию контента. А таблицы — отличный элемент структуризации информации на сайте и не только на нем.

Будем продолжать данную серию статей. Ждите новых материалов. До встречи.

С уважением, Константин Хмелев!