кнопка наверх

Таблицы для сайта на WordPress: популярные плагины и простые решения

Адаптивные таблицы для WordPressВсем привет!

В сегодняшнем обзоре мы поговорим о том, как добавить таблицы на сайт на WordPress. Мы рассмотрим разные варианты их установки: с плагинами и без. Основное внимание уделим созданию адаптивных таблиц, ведь правильное отображение сайта на мобильном устройстве — важнейший фактор успеха вашего ресурса. Читайте о мобильной версии блога на WordPress, о его адаптивности.

Содержание:

  1. Способы добавления таблиц в запись вручную
  2. Основные плагины
  3. Как сделать адаптивные таблицы для WordPress-блога

Как вставить таблицу в запись на WordPress-блоге?

Один из самых простых способов сделать таблицу на WordPress-блоге вручную — использовать html. Для этого нам потребуется знание таких основных html-тегов: Table, Tr, Th и Td. Таблица начинается с открытия тега <table>, и соответственно завершается </table>. Внутри задаются строки с помощью тегов <tr>. Внутри тегов <tr> помещаются <th> и <td>, обозначающие ячейки. В случае с <th> — это ячейки для шапки таблицы, в них текст выделяется полужирным шрифтом. А <td> — обычные ячейки, в них текст выравнивается по левому краю. В свою очередь внутри тегов <th>, <td> может размещаться контент.

Для примера создадим таблицу из трех строк и трех столбцов. Для этого нужно вставить код ниже на вкладке «Текст» (не путать с «Визуально» в редакторе).

<table>
<tr>
<th> Строка 1 Столбец 1 </th>
<th> Строка 1 Столбец 2 </th>
<th> Строка 1 Столбец 3 </th>
</tr>
<tr>
<td> Строка 2 Столбец 1 </td>
<td> Строка 2 Столбец 2 </td>
<td> Строка 2 Столбец 3 </td>
</tr>
<tr>
<td> Строка 3 Столбец 1 </td>
<td> Строка 3 Столбец 2 </td>
<td> Строка 3 Столбец 3 </td>
</tr>
</table>

Строка 1 Столбец 1 Строка 1 Столбец 2 Строка 1 Столбец 3
Строка 2 Столбец 1 Строка 2 Столбец 2 Строка 2 Столбец 3
Строка 3 Столбец 1 Строка 3 Столбец 2 Строка 3 Столбец 3

Это самая простая таблица. Для того, чтобы изменять ее вид и расположение, можно задавать элементам дополнительные атрибуты. Например, для <table> можно задать выравнивание (Align), отступ текста от краев в ячейках (Cellpadding), отступ между соседними ячейками (Cellspacing), фон (Background), цвет фона (Bgcolor), рамка таблицы (Border). Подобным образом можно добавлять атрибуты для элементов строк и ячеек <tr>, <td>, <th>. Приведем пример. Зададим всем трем строкам таблицы разные цвета:

<table>
<tbody>
<tr bgcolor="green">
<th>Строка 1 Столбец 1</th>
<th>Строка 1 Столбец 2</th>
<th>Строка 1 Столбец 3</th>
</tr>
<tr bgcolor="red">
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
<td>Строка 2 Столбец 3</td>
</tr>
<tr bgcolor="yellow">
<td>Строка 3 Столбец 1</td>
<td>Строка 3 Столбец 2</td>
<td>Строка 3 Столбец 3</td>
</tr>
</tbody>
</table>

Строка 1 Столбец 1 Строка 1 Столбец 2 Строка 1 Столбец 3
Строка 2 Столбец 1 Строка 2 Столбец 2 Строка 2 Столбец 3
Строка 3 Столбец 1 Строка 3 Столбец 2 Строка 3 Столбец 3

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

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

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

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

Популярные Вордпресс-плагины для создания таблиц

MCE Table Buttons

Самый простой способ создать таблицу на странице в Вордпресс с помощью плагина – добавить специальную кнопку в визуальный редактор TinyMCE. Сделать это можно, установив MCE Table Button. После его активации появляется такая кнопка (см. скриншот):MCE Table Button: плагин для добавления таблицы на WordPress

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

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

TablePress

Очень популярный плагин TablePress, ранее он назывался WP-Table Reloaded, считается одним из лучших для вставки таблиц для сайтов на WordPress. Он поддерживает функцию загрузки и импорта таблиц в форматах csv, excel, html, json. В них можно вставлять любой контент, включая формулы. В TablePress есть функции сортировки, фильтров, дублирования строк и столбцов, пагинации (разбивка на страницы). Здесь есть базовый дизайн таблиц, вот такого вида:Как вставить таблицу на сайт на WordPress

Менять css-стили таблиц можно в разделе Plugin Options.TablePress: лучший плагин по созданию таблиц для Вордпресс

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

Но данный плагин по умолчанию создает неадаптивные таблицы. Для того, чтобы добавить функцию адаптивности, потребуется устанавливать дополнительный плагин от разработчиков TablePress – Responsive Tables — https://tablepress.org/extensions/responsive-tables/. Это расширение бесплатное. После того как установлен основной плагин и расширение, для создания адаптивной таблицы потребуется изменить полученный в TablePress shortcode на шорткод вида:

[table id=123 responsive=mode /]

Где вместо “mode” нужно вставить одно из трех возможных значений: flip, scroll, или collapse. К примеру, вот так будет выглядеть режим scroll:Как сделать адаптивные таблицы WordPress бесплатно

Здесь таблица прокручивается по горизонтали, а шапка расположена сверху. В случае с режимом flip – шапка будет размещена слева, а прокрутка по-прежнему по горизонтали. В режиме collapse, значения, которые не поместились на экране, отображаются в раскрывающемся списке под каждым строчным элементом таблицы. Для просмотра необходимо нажать на крестик.

FooTable

Данный JQuery плагин преобразует созданные html-таблицы в адаптивные. Кроме того, можно использовать его базовые стили, добавлять фильтрацию, пагинацию, сортировку. В настройках вы задаете ширину устройств, количество отображаемых столбцов на том или ином девайсе:Плагины для вставки таблицы на сайт на Вордпресс

Последнее обновление FooTable было три года назад.

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

Еще один более обновляемый плагин, который делает html-таблицы адаптивными — Magic Liquidizer Responsive Table.

wpDataTables

Этот плагин платный (25 долларов), но можно использовать бесплатную версию wpDataTables Lite. Таблицы тут можно загружать из csv, excel, xml, json файлов. После загрузки в админке вы задаете настройки таблицы: цвета ячеек, названия столбцов и т.д. Затем можно вставить полученный шорткод в запись. Также есть возможность использовать специальную кнопку плагина в визуальном редакторе TinyMCE, которая появится после активации wpDataTables Lite. По умолчанию во всех таблицах доступны функции сортировки, пагинации, поиска. Поддерживаются следующие виды контента:

  • текст;
  • дата;
  • время;
  • изображения;
  • url-ссылки;
  • Email-ссылки.

Но для лайт-версии существует ряд ограничений. Вот основные из них:

  1. Таблицы неадаптивные;
  2. Максимальное количество строк – 150;
  3. Нет поддержки MySQL;
  4. Нет конструктора таблиц, доступного в премиум-версии.

Оценки у данного плагина для таблиц на WordPress в основном высокие, активных загрузок 10 000+, последнее обновление – 2 месяца назад.

Вот видео-инструкция по настройке плагина wpDataTables 2.0:

Data Tables Generator by Supsystic

Supsystic разрабатывает различные плагины для Вордпресс, в том числе и для создания таблиц. Здесь также есть бесплатный и платный вариант загрузки. Стоимость Data Tables Generator PRO – 29 долларов. Но можно использовать и Free-версию. Основное отличие – в бесплатном варианте нет возможности экспорта и импорта таблиц из csv, excel, pdf, выгрузки в Google Sheets. Также в бесплатной версии нельзя строить диаграммы, нет истории создания таблиц, кнопки для печати.

Но при этом даже бесплатный плагин Data Tables создает адаптивные таблицы для WordPress-сайта. Также здесь нет ограничения по количеству строк и столбцов (в отличие от wpDataTables). Есть возможность вставлять данные в виде текста, изображений, ссылок, комментариев. Поддерживается формат даты, процентов, валют. Как и в ранее описанных плагинах, в Data Tables Generator есть функции сортировки, пагинации, поиска.

На видео можно посмотреть, как добавить таблицу на сайт на WordPress:

Последнее обновление плагина было 2 месяца назад. У него много хороших отзывов и 20 000+ активных загрузок.

Как сделать таблицы на WordPress адаптивными с помощью кода?

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

Для начала нам нужно определить класс блока, в котором расположена таблица на сайте. Сделать это можно с помощь компонента FireBug в Mozilla, или «Просмотра кода элемента» для большинства бразуеров.

Далее выбираем ширину экрана, при которой таблица перестает быть читабельной. В файле style.css прописываем следующее:

@media screen and (max-width:600px) {
#primary tr td, #primary th  {
	  display:block;
}

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

Приведем более развернутый пример. Предположим у нас есть такая таблица:Адаптивная таблица на Вордпресс с помощью html и css

Ее неадаптивная версия на мобильном телефоне будет отображаться вот так:Адаптивные таблицы

Оба варианта не читабельные.

Мы собираемся использовать принцип адаптивного дизайна (запрос CSS @media), чтобы определить меньше ли экран чем ширина нашей таблицы. Если это так, то мы будем переформатировать таблицу.

Вот часть html-кода нашей таблицы:

<table>

     <thead>

     <tr>

          <th>First Name</th>

          <th>Last Name</th>

          <th>Job Title</th>

     </tr>

     </thead>

     <tbody>

     <tr>

          <td>John</td>

          <td>Pollak</td>

          <td>Writer</td>

     </tr>

     <tr>

          <td>Tom</td>

          <td>Waren</td>

          <td>Self Employed</td>

     </tr>

     </tbody>

</table>


Вот описание стилей таблицы:

/*
Общий стиль для компьютеров и ноутбуков
*/
table {
  width: 100%;
  border-collapse: collapse;
}
/* Чередование полос */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

А теперь рассмотрим, что же нам делать для устройств с маленьким экраном. Мы определили, что минимальная ширина таблицы – 760 px. Т.е. для всех экранов, меньше 760 px по ширине нам нужно задать новые параметры для нашей таблицы. И здесь мы подключаем медиа запрос.

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Задаем табличным элементам свойства блоков*/
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Скрываем заголовки таблицы */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr { border: 1px solid #ccc; }

	td {
		/* Задаем ячейке свойства строки */
		border: none;
                               width: 100%;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Передним ячейкам задаем свойства заголовка таблицы */
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
}

Теперь элементы таблицы приобретут свойства блоков, а просматривать данные на мобильном телефоне можно по вертикали:Как вставить адаптивную таблицу на сайт wordpress

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

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

До новых встреч!


1 звезда2 звезды3 звезды4 звезды5 звезд (7 оценок, среднее: 5,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Timofei:

    Я за гoд рaботы в cкинeбoди стoлько нe получалa cкoльkо здесb нa pасcылкe. Aрceний спaсибо тeбe большoe. Сeйчaс я точно пepестану мaятьcя eрyндой c этими таблетkaми)))) А тo и нa внykов вpeмени нe хвaтaлo c тaкoй пoдработкой. Тeпеpb подapкoв смoгу вcем наkупитb и поkaзать что финансы в нетe мoжнo зарaбатывaтb!

    Ответить
  2. Егор:

    Спасибо, благодаря вашей статье получилось сделать адаптивную таблицу без плагинов. Всё очень понятно изложено.

    Ответить
  3. Сергей Кузнецов:

    Приветствую!

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

    Зачем PHP-код? Надеюсь через него из админки грузить некую переменную, умножать её на значение ячейки и записывать в другую ячейку. Можно ли сделать так?

    Ответить
  4. Василь:

    Спасибо за очень полезную статью!

    Я использовал Ваш html и сss код, однако у меня на мобильном отображается иначе, чем в Вашем последнем примере: заглавия таблицы остаются только сверху, дальше — только «тело» таблицы.

    Вот как выглядит моя таблица на широком экране:

    drive.google.com/ open?id=1g74VqvCIbotZP4MDUQ9rld7CFriSOZfA

    А так на мобильном:

    drive.google.com/ open?id=1JDeumUlAdsXQC03U7suirpBAVrrUx0NZ

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

    Буду благодарен за ответ!

    Ответить
  5. Евгений:

    Здравствуйте подскажите пожалуйста куда вносить эти коды. В файл style.css?

    Ответить
Ваш комментарий: