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

Добавил пользователь Morpheus
Обновлено: 04.10.2024

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

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

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

Наименование таблицы

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Строка 1 Столбец 1	Строка 1 Столбец 2	Строка 1 Столбец 3	Строка 1 Столбец 4
Строка 2 Столбец 1	Строка 2 Столбец 2	Строка 2 Столбец 3	Строка 2 Столбец 4

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

Наименование таблицы

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Строка 1 Столбец 1	Строка 1 Столбец 2	Строка 1 Столбец 3	Строка 1 Столбец 4
Строка 2 Столбец 1	Строка 2 Столбец 2	Строка 2 Столбец 3	Строка 2 Столбец 4

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

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

Плагин TablePress

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

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

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

Tablepress адаптивность

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

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

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

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

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

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

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

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

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

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

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

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

Стили

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

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

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

Можно поменять стиль только в конкретной таблице и в конкретной строке. Например сделаем выравнивание по центру в строке 4 таблицы 8:

.tablepress-id-8 .row-4 td

И так далее вплоть до конкретной строки, колонки, ячейки.

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

Экспорт данных

При переносе статей с одного сайта на другой рекомендую экспортировать таблицы в формате JSON, ибо:

В форматах CSV и HTML сохраняются только данные таблицы, без ее параметров! Данные и параметры таблицы экспортируются и сохраняются только в формате JSON.

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

Например можно импортировать крутые таблицы с кнопками и другим оформлением выделив кусок кода от

до

и вставив в режиме HTML.

Шорткоды Table Press

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

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

Справку по использовании шорткодов для управления таблицами при их выводе в записях и на страницах можно посмотреть на странице автора TablePress или в статье.

Как закрепить заголовок таблицы

Плагин DataTables FixedHeader фиксирует строку заголовка таблицы в верхней части экрана, когда пользователь прокручивает длинную таблицу на странице. Чтобы использовать это вставьте расширенный шорткод:

где измените 123 на ваш идентификатор таблицы.

Как закрепить столбец таблицы

Плагин DataTables FixedColumns позволяет фиксировать столбцы с левой и правой сторон таблицы. Это может быть полезно в широких таблицах с левым столбцом. Чтобы использовать это вставьте расширенный шорткод:

[table datatables_fixedcolumns_left_columns=1 datatables_fixedcolumns_right_columns=0 /]

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

Баги и фичи

P.S. Нашлось еще одно решение для срабатывания пользовательского CSS в настройках TablePress:

В Customizing есть вкладка для кастомного css куда вставь
(например для центрирования):

Вся фишка в !important, который все перезатрет.

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

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

Автор Александр Свищ Дата 05.06.2017 (Обновлено: 02.10.2021)

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Таблицы в WordPress важный элемент вывода информации на странице. Довольно часто возникает необходимость показать данные в виде таблицы. И здесь к нам на помощь приходит плагин таблицы для WordPress, который называется TinyMCE Advanced. Сам плагин содержит в себе много различных инструментов, среди которых создание таблиц на страницах сайта.

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

После заполнения всех полей сохранитесь и посмотрите результат вашей работы. Вот такая таблица получилась у меня:

Введение в таблицы WordPress

При создании таблицы редактор спрашивает, сколько столбцов и строк нужно в нее добавить.

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

При просмотре на сайте большинство таблиц будут выглядеть идеально.

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

При этом некоторые темы оформления включают в себя различные стили оформления таблиц. В предыдущем примере мы использовали стандартную тему оформления Twenty Twenty . Вот та же таблица, которая отображается на сайте, использующем тему оформления Astra :

Для решения этой проблемы следует найти способы изменения CSS-стилей таблицы.

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

В WordPress есть два способа решения этой проблемы:

1. Использование плагинов

Есть много плагинов, которые позволяют сделать таблицы WordPress адаптивними. Один из них – Ninja Tables .

После установки и активации плагина Ninja Tables перейдите в меню Ninja Tables > All Tables , чтобы создать новую таблицу.

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

Затем нажмите кнопку Add Data , чтобы создать строки таблицы. Когда закончите, перейдите на вкладку Table Design . Здесь можно просмотреть, как таблица будет выглядеть на ПК, планшете и смартфоне.

Вы также можете создавать мобильные стековые представления, установив флажок Enable Stackable Table .

А также опубликовать созданную таблицу, используя блок Ninja Tables в блочном редакторе Gutenberg.

2. Редактирование темы оформления

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

Для этого нужно добавить определенный CSS-класс к HTML-таблицам, которые необходимо сделать адаптивными. Например, . Затем нужно добавить приведенный ниже код в файл style.css используемой темы оформления.

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

В качестве альтернативы можно использовать CSS для объединения столбцов:

Чтобы реализовать его, вам нужно сделать две вещи:

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

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

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

Данный код устанавливает контрольную точку на 600px и перестраивает таблицу при просмотре на экране меньшего размера.

Единственным недостатком этого подхода является необходимость ручного добавления тегов и во все таблицы. Было бы проще включить объединенные столбцы с помощью плагина Ninja Tables.

Вместо этого мы рекомендуем использовать этот JavaScript-код , так как он позволяет автоматизировать процесс.

Заключение

Существует два способа создания адаптивных таблиц в WordPress:

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

Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, подписки, отклики, лайки, дизлайки огромное вам спасибо!

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

Около месяца назад мы работали над проектом одной нашей клиентки. Для контента ей были необходимы HTML таблицы. Но обязательным условием было то, чтобы она смогла их самостоятельно использовать, не трогая код. Так мы нашли несколько отличных плагинов для вставки таблиц для WordPress, и сегодня хотим поделиться ими с вами.

Наши критерии при выборе плагина для таблиц

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

Количество активных установок
Профиль разработчика
Отзывы пользователей
История исправлений безопасности

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

1. TablePress

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

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

Еще одним достоинством этого плагина является возможность импорта. Мы импортировали несколько готовых файлов с таблицами в формате HTML, и они отлично заработали с TablePress. Можно импортировать и другие форматы, к примеру CSV, XLS, XLSX, JSON.

Функции

Добавляйте или создавайте таблицы с любым содержанием: текст, числа, изображения, ссылки и даже HTML или JavaScript
В таблицах есть формулы, как в Excel
Импорт таблиц (в форматах Excel (.xls/.xlsx), CSV, HTML или JSON, из загруженного файла, URL, из сервера или прямой ввод)
Экспорт, хранение, резервное копирование таблиц большинства этих форматов
Простое добавление ссылок или изображений в ваши таблицы (из Media Library)
Расширенный редактор изменения стилей без необходимости знания HTML
Функция Duplicate
Простая вставка таблиц в вашу запись или страницу с помощью кнопки в панели инструментов редактора
Предварительный просмотр таблицы и функции DataTables библиотеки JavaScript, например, сортировка, разбивка на страницы, фильтр и поиск, прокрутка данных таблицы (смотрите Demo Table ).

2. Easy Table

WordPress плагин Easy Table значительно упрощает процесс создания таблиц. У него 90 000 активных установок и он позволяет ввести данные таблицы прямо в запись, которую вы пишете. Easy Table включает в себя плагин jQuery, который поддерживает функцию сортировки.

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

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

Функции

Очень простой плагин. Не нужно никаких дополнительных умений
Чтение данных из файлов CSV и отображение их в таблице
Наличие функции сортировки. Поддающиеся сортировке колонки таблицы (используя плагин jQuery)
Безопасный режим WYSIWYG. Это значит, что вы можете переключаться между HTML и вкладкой просмотра в редакторе WordPress, не портя данные таблицы.

3. Ultimate Tables

Ultimate Tables – ещё один отличный вариант. Плагин предлагает на выбор 3 готовых темы, или же вы можете самостоятельно создать дизайн для ваших таблиц. В отличие от TablePress и Easy Table, Ultimate Tables не является многофункциональным плагином, но у него более 10 000 активных пользователей. У нас были проблемы с импортом CSV, но в итоге с помощью простого шорткода нам удалось добавить таблицы.

4. JTRT Responsive Tables

Если вы ищите адаптивный плагин таблиц, то обязательно обратите внимание на JTRT Responsive Tables. Он поможет вам создать адаптивные таблицы в бэкенде без написания кода. Этот плагин конвертирует CSV файлы в адаптивный HTML.

Итоги

Все эти плагины будут отличным выбором, но всё зависит от ваших нужд.

Если вам нужны дополнительные функции, то выбирайте TablePress
Если вы цените простоту, то вашим выбором должен стать Easy Table
Если вы будете иметь дело с небольшим количеством информации, то вам подойдут Ultimate Tables и JTRT Responsive Tables

Есть и другие хороши плагины, которые мы не назвали, например, Easy Pricing Tables с более 20 000 активных установок. Как мы уже говорили раньше, не бойтесь попробовать несколько плагинов, чтобы выбрать нужный.

Читайте также: