Плагин таблицы для wordpress


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

плагин таблицы для wordpress

Содержание:

  1. Плагин для создания простых таблиц;
  2. Плагин для создания функциональных таблиц.

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

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


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

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

MCE Table Buttons — простые таблицы для WP

Через админку входим в раздел «Плагины — Добавить новый», в строке поиска вводим MCE Table Buttons и устанавливаем его:

плагин для таблиц Вордпресс - MCE Table Buttons

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

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

редактор таблиц для WordPress

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

TablePress — навороченный плагин для таблиц на WordPress


Если вам нужны не просто таблицы, а возможность разделения/объединения ячеек, сортировка данных, фильтрация и тому подобные вещи, то MCE Table Buttons будет недостаточно. В этом случае стоит взять плагин TablePress — он создает весьма функциональные итерактивные адаптивные таблицы для WordPress. Устанавливается по аналогии, только в поиске набираем «TablePress».

tablepress - установка плгина

После активации в панели управления слева появится одноименный раздел:

меню tablepress

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

Первоначально выбираете пункт «Добавить новую» и в редакторе рисуете и настраиваете необходимую конфигурацию таблицы. Настройка идет в 2 шага:

1. Основные настройки

Здесь указывается название и описание объекта и его первоначальные примерные размеры:


основные настройки

После нажатия на кнопку, идем уже к продвинутым настройкам.

2. Продвинутые настройки

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

Шорткод с ID таблицы — нужен для вставки в запись.

shortcode

Содержимое таблицы — заполняете ячейки, стрелки над столбцами позволяют сортировать:

содержимое таблицы

Редактирование таблицы — выделяете галочками нужные ячейки, строки, столбцы и задаете необходимые параметры с настройками:

редактирование таблицы

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

Параметры таблицы — визуальное отображение для пользователя:

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

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

Настройка функций — самые продвинутые технологии:


настройка функций datatables javascript

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

biznessystem.ru

Плагин TABLEPRESS

Редко можно найти плагин с большим количеством закачек, который к тому же сохраняет идеальный 5-звёздочный рейтинг. Один плагин из этой категории – это TablePress, самый популярный плагин для создания таблиц в WordPress с почти полумиллионом закачек.

TablePress является официальным преемником WP-Table Reloaded и был переделан заново для более удобной работы и выбора таблиц.

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

 

Особенности TablePress:


  • Создание таблиц без использования кодов HTML
  • Таблицы могут содержать любые типы данных
  • Ячейка может занимать несколько строк или столбцов
  • Формулы можно использовать для вычисления данных
  • Строки могут быть отсортированы
  • Таблицы могут быть разбиты на несколько страниц
  • Данные в таблице могут быть отфильтрованы
  • Можно использовать внешние файлы CSV для создания таблиц
  • Можно использовать CSS для изменения стиля таблицы

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

 

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

 

Плагин EASY TABLE

Easy Table хорошо работает, предоставляя TablePress работать за свои деньги, и имеет рейтинг 4,8 из 5 возможных, что, конечно, является очень хорошими показателями.

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

Лучше это или нет – решать вам. Однако в создании таблицы «на лету», в процессе записи, есть свои преимущества.

Другие особенности от лидера Easy Table, которые могут соблазнить вас:


  • Добавление таблиц в виджеты
  • Создание динамических таблиц из CSV-файла
  • WYSIWYG, надёжный переключатель вида, не нарушающий таблицу
  • Установка фиксированной ширины таблицы
  • Ячейки могут занимать несколько столбцов и строк
  • Сортировка нескольких столбцов с помощью параметров короткого кода

 

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

 

Плагин WPDATATABLES

В то время, как два вышеперечисленных варианта прекрасно подходят для тех, кто хочет быстро создать таблицу в WordPress а затем опубликовать её в записи или на странице, wpDataTables – это плагин, который делает совершенно другие вещи.

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

Коротко, преимущества и особенности wpDataTables включают в себя:

  • Создание динамических таблиц, которые обновляются, когда есть источник данных
  • Добавление фильтрации, сортировки, печати и экспорта параметров для вашей таблицы
  • Создание диаграмм из внешних источников данных
  • Использование Excel, CSV, MySQL-запросы и другое в качестве источника данных
  • Настройка внешнего вида таблицы

 

Как и в плагине TablePress, в wpDataTables таблицы и графики создаются и управляются независимо от записей и страниц WordPress – в определённом месте панели администратора – и затем вставляются в контент с помощью шорткодов.

 

Если вы хотите создавать таблицы и диаграммы с данными, хранящимися вне WordPress, то премиум плагин wpDataTables – это отличный выбор, который на удивление прост в использовании.

 

GOOGLE CHART WORDPRESS PLUGIN

Если вы хотите добавлять диаграммы в ваши записи и страницы, но вам не нужны инструменты таблицы, то плагин Google Chart WordPress – это именно то, что вам нужно.

Это премиум плагин, но он стоит лишь $7. Этот плагин будет использовать данные из Google Spreadsheet, чтобы создавать различные графики и диаграммы для использования в записях WordPress. Это не плагин для таблиц, но он позволяет отображать различные графики, которые обновляются при изменении исходной таблицы, что делает его отличным вариантом для отображения динамики данных на графиках вашего сайта.


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

 

Плагин WORDPRESS PRICING TABLES

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

Однако с тех пор был выпущен плагин Easy Pricing Tables, который на поверку оказался популярным бесплатным вариантом для добавления этого типа таблиц на ваш WordPress сайт. Бесплатная версия имеет некоторые замечательные особенности, которые могут быть расширены в премиум версии, в том числе:

  • Очень удобный показ таблиц
  • Создание неограниченное количества строк и 10 столбцов
  • Настройка размера и цвета шрифта
  • Изменение порядка столбцов перетаскиванием
  • Настройка выделения столбцов

 

Премиум версия Easy Pricing Tables включает в себя четыре варианта таблиц, дополнительные параметры настройки, интеграцию в Google Analytics и выбор иконки для включения в таблицы.

Если вы хотите иметь очень простой способ добавления на ваш WordPress сайт различных таблиц, то Easy Pricing Tables – именно то, что вам надо.

 

Плагин LEAGUE TABLE

Плагин League Table – это инструмент для пользователей WordPress, который даёт им возможность добавлять группы, репутации, график ранжирования, таблицы иерархии для записей и страниц.

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

Некоторые особенности плагина League Table:


  • Сортировка таблицы по нескольким столбцам
  • Использование цветовой палитры для настройки таблиц
  • Мобильный удобный дизайн
  • Вставка таблиц с использованием коротких кодов

 

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

 

ЗАКЛЮЧЕНИЕ

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

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

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

clubwp.ru

Настройки внешнего вида таблиц

Плагин позволяет менять следующие элементы:

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

адаптивная таблица wordpress
Настройки плагина адаптивных таблиц
Адаптация таблицы на экранах смартфонов
Адаптация таблицы на экранах смартфонов

Как добавить таблицу в запись или на страницу WordPress?

Самый простой способ — установить плагин TinyMCE Advanced, который добавит в панель инструментов визуального редактора кнопку добавления таблицы.

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

Также можно скопировать таблицу из Ворда.

Еще есть способ, требующий знаний HTML — перейти на вкладку «Текст» визуального редактора, и вставить таблицу вручную, вот пример кода HTML таблицы:

<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
Строка 4 Столбец 1 Строка 4 Столбец 2 Строка 4 Столбец 3

 

inprocess.by

Таблицы в Вордпресс

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

Да, современные таблицы в Вордпресс могут многое. Вы думаете что знаете все про таблицы? Я тоже так думал пока не узнал про wpDataTables. Таких таблиц ,какие делает этот плагин ни делает никто. Вы видели таблицу с формой поиска, с фильтром поиска по словам, сортировкой, постраничной навигацией, с возможностью импорта и экспорта в EXCEL, CSV, печати? Знакомьтесь, все  это и многое другое в wpDataTables.

Плагин создания таблиц wpDataTables

Если я скажу, что плагин wpDataTables монстр в создании таблиц, то наверно не ошибусь. Ему доступны любые таблицы! Но главная его особенность в том, что вы можете создавать таблицы привычным для вас способом, к примеру, из Excel или CSV файла. Кроме этого плагин создаёт красочные диаграммы и графики.

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

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

wpDataTables — это мощный плагин таблиц и диаграмм для WordPress

Адаптивные таблицы для WordPress

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

Читайте про: Мобильное seo продвижение ➠

Внутренний редактор таблиц

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

Адаптивные таблицыБесплатная версия lite wpDataTables

WpDataTables Lite — это базовая бесплатная версия плагина. Хотя некоторые из премиальных функций уменьшены, wpDataTables Lite по-прежнему является довольно удобным инструментом, который позволит вам быстро создавать таблицы в WordPress из разных источников:

  • Excel — текстовая и видеодокументация
  • CSV — текстовая и видеодокументация
  • JSON — текстовая и видеодокументация
  • XML — текстовая и видеодокументация
  • PHP — текстовая и видеодокументация

Таблицы создаются на 3-4 основных этапа:

  1. подготовьте источник данных (например, файл CSV);
  2. создайте новый wpDataTable в панели WP-admin и загрузите файл;
  3. необязательный шаг — настройка столбцов таблицы (переименование, изменение порядка, добавление классов CSS, скрытие, изменение цветов);
  4. вставьте сгенерированный шорткод (короткий код);
  5.  в свою статью или страницу (вы также можете использовать кнопку TinyMCE в стандартном редакторе сообщений WordPress, которую добавляет плагин).

Все таблицы станут сортируемыми и будут иметь разбиение по страницам по умолчанию. Кроме того, каждая таблица может иметь строку поиска и может иметь «Копировать в буфер обмена», «Экспорт в CSV», «Экспорт в PDF», «Экспорт в XLS». Все эти функции настраиваются, и вы решаете, включать или отключать их.

Поддерживаются следующие типы данных столбцов (большинство типов столбцов, кроме изображений, имеют свои собственные правила сортировки):

  • Строка — текстовая и видеодокументация
  • Целое число — текстовая и видео документация
  • Плавающая запятая — текстовая и видеодокументация
  • Дата — текстовая и видеодокументация
  • Дата и время — текстовая и видеодокументация
  • Время — текстовая и видеодокументация
  • Картинка — текстовая и видеодокументация
  • Ссылка URL — текстовая и видео документация
  • Электронная почта — текстовая и видео документация

Дополнение для wpDataTables

Надоело заполнять одни и те же документы снова и снова? Нам всем приходится иметь дело с документами каждый день: письма, контракты, отчеты, заявления, коммерческие предложения, официальные запросы и т. Дополнение  для wpDataTables Report Builder автоматизирует создание документов на вашем сайте WordPress — все, что вам нужно сделать, это подготовить шаблоны. Предоставьте любые шаблоны DOCX или XLSX — например, используйте корпоративную форму, которую вы уже имеете с логотипом и деловой информацией.

dopolneniya-wpdatatablesОбратите внимание на некоторые ограничения версии Lite

  1. плагин позволит использовать только таблицы до 150 строк;
  2. таблицы на основе MySQL не включены;
  3. обработка на стороне сервера для больших таблиц не включена;
  4. реагирующий режим для таблиц не включен;
  5. редактирование интерфейса не включено;
  6. excel-подробное редактирование не включено;
  7. графики Google и HighCharts не включены;
  8. мастер конструктора таблиц (пошаговый генератор таблицы) не включен;
  9. доступ к системе премиум-поддержки не включен.

Вы можете получить все эти функции, купив полную версию на сайте плагина.

Установка плагина

Установка плагина очень проста. Скачать плагин
Выберите один из следующих вариантов:

  1. Установите прямо из панели администрирования WordPress: перейдите в раздел «Плагины» -> «Добавить новый» -> «Поиск по« wpDataTables »и нажмите кнопку« Установить ».
  2. Загрузите ZIP вручную из репозитория плагинов WordPress и загрузите его через панель администратора WordPress: перейдите в раздел «Плагины -> Добавить новый -> Загрузить плагин», перейдите к загруженному Zip и загрузите его.
  3. Загрузите ZIP архив, извлеките его и вручную загрузите извлеченную папку через FTP в /wp-content/plugins/каталог вашей установки WordPress.

Активируйте плагин через меню «Плагины» в WordPress.
Это всё!

webmaster18.ru

1. Ultimate Tables — бесплатный генератор красивых таблиц для Вордпресс

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

Хоть Ultimate Tables и бесплатный модуль, но по умолчанию предоставляет сразу 6 типов оформления для таблицы в WordPress. При желании, вы можете выбрать любой из стилей, и сделать из него свой собственный, чтобы отличаться от сайтов других пользователей дополнения. Либо можете полностью убрать стилевое оформление, оставив «голую» таблицу для удобного и практичного просмотра посетителями.

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

2. TablePress — топовый плагин для настройки таблиц в WordPress

TablePress не всегда так назывался. Многие его помнят как WP-Table Reloaded. Но время идет и многое меняется — в названии убрали префикс, и добавили множество новых и полезных функций, сделав данный инструмент одним из лучших в этой категории.

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

Если добавили строку в неправильном порядке — не беда, TablePress позволяет это быстро исправить простым перетаскиванием. Так же можете добавить или убрать лишние элементы, дублировать части таблицы. При помощи TablePress у вас появляется возможность сделать таблицу с расстановкой акцентов — отдельные секторы выделяются, а строчки и столбики можно объединять. И необязательно, чтобы в сгенерированной таблице был один текст — можно вставлять и изображения. Без TablePress это сделать практически невозможно — прописывать префикс, специальные теги с параметрами картинок в таблице слишком сложно.

3. Easy Table — неординарный плагин для таблиц

При помощи Easy Table таблицы вы будете не добавлять, а буквально писать. Только не так, как это делали в html-редакторе — префикс и разделение тегов указывать не придется. Чтобы сделать таблицу с дополнением Easy Table вам необходимо будет освоить формат CSV. Им легко пользоваться, если приловчиться. Запомните:

  1. Столбцы разделяются запятыми;
  2. Строчки фиксируются пробелами.

Может показаться, что это неудобно и вы лишь потратите время. Но на деле Easy Table оказывается как раз наоборот — инструмент сокращает часы, которые вы бы потратили за генерацией таблиц. К тому же, для быстрого освоения модуля разработчики предоставили прекрасный мануал о том, как получить максимум с использования Easy Table. А чтобы не закидывать на сайт недоделанные куски таблиц, внутри инструмента есть среда для тестирования ваших творений. Если планируете длительное время работать с таблицами, лучше изучить принципы работы с CSV-форматом — в дальнейшем это только поможет вам.

4. Websimon Tables — еще один бесплатный плагин для таблиц

Данный инструмент позволяет добавлять текстовые базы данных прямо с меню администрирования. Знание CSV-формата может понадобиться и для пользования этим модулем, ведь у Websimon Tables есть возможность импорта таблиц в CSV.

Но ключевой «изюм» приведенного инструмента — это большое количество стилевого оформления, как для бесплатного дополнения. У вас есть возможность «запечатать» информацию в таблицах с 10 стандартными стилями. А если они не понравятся, или хотите подогнать «скин» под дизайн сайта, всегда можете сделать свой из уже предложенных. В настройках дизайна имеются такие параметры, как тень, границы, блоки и другое. Только сильно не увлекайтесь украшением таблиц, а то скроете главное — их суть.

5. FooTable — плагин для улучшения имеющихся на сайте таблиц

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

Главное предназначение FooTable — это адаптация таблиц под мобильные девайсы. Если просто прописать префикс в тегах, добавив БД на сайт, вы не гарантируете, что материал будет корректно отображаться пользователям через мобильные устройства. А FooTable гарантирует. Если понадобится, плагин убавит число демонстрируемых столбиков и строк и переместит их, лишь бы посетителю было удобно.

Вы сможете предварительно смотреть как будут видеть базы данных пользователи с разных устройств: ПК, смартфон, планшет и т. д. Кроме того, к уже существующим таблицам можно применять дизайн от плагина FooTable — в каталоге стилей имеется 3 профессиональных оформления.

Проще всего работать одновременно с TablePress и FooTable — эти инструменты взаимодействуют между собой. В первом легко сделать таблицу, во втором — адаптировать ее.

6. League Table — мощный платный плагин для создания спортивных таблиц

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

Используя League Table вам не придется пользоваться сразу двумя плагинами — модуль автоматически адаптирует созданные таблицы под любое устройство. Дизайн баз данных не напыщенный, эстетичный и понятный. Для вставки готовой таблицы League Table продиктует вам шорткод, который необходимо будет разместить на сайте.

Выводы

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

Похожие статьи

wordpresslib.ru

Создание таблицы в WordPress с TablePress

TablePress – невероятно популярный плагин WordPress и не зря. На данный момент у него более 500,000 установок и рейтинг популярности в 5 звёзд. Подобного успеха очень непросто достичь.

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

Что такое TablePress?

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

  • Функции импорта. С помощью TablePress вы можете легко создавать таблицы с нуля, но вы также можете импортировать любые существующие файлы CSV, Excel, HTML и JSON, которые у вас уже есть. Если у вас уже есть данные, это упростит процесс создания таблицы и не потребуется вручную всё заполнять.
  • Функции экспорта. Если вы создали таблицу с TablePress, вы сможете использовать её не только здесь. С удобной функцией экспорта, вы можете его осуществить в файлы формата CSV, HTML или JSON. Если вы когда-либо будете переносить свой сайт, возможность забрать данные с собой окажется очень ценной.
  • Поддержка формул. Если вы привыкли создавать таблицы в Excel, то вам будет очень комфортно с TablePress. Этот плагин поддерживает формулы, поэтому вам не нужно будет делать свои подсчёты где-то отдельно, вы сможете делать их внутри таблицы.
  • Расширения. И наконец, есть целый ряд дополнений, которые ещё больше расширяют функционал плагина. Эти расширения могут добавить такую функциональность, как адаптивность таблиц, фильтры, конвертация таблицы в PDF для скачивания, нумерация строк и другие. Большинство плагинов расширения бесплатны, платные премиум плагины запрашивают добровольное пожертвование в процессе скачивания.

Достоинства и недостатки TablePress

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

Достоинства TablePress 

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

Недостатки TablePress

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

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

Первым шагом создания таблицы в WordPress будет установка плагина TablePress. Для этого перейдите в Плагины › Добавить новый в админ консоли WordPress. Найдите TablePress, установите и активируйте плагин.

Установка плагина wordpress tablepress в админ консоли

После установки плагина перейдите в меню TablePress в панели слева.

Страница настроек плагина tablepress

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

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

Страница добавления новой таблицы wordpress в tablepress

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

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

Способ добавление таблицы wordpress на страницу или в запись при помощи шорткода - tablepress

Вторая – использование кнопки Вставить таблицу из TablePress на панели инструментов для редактирования страницы/записи.

Способ добавление таблицы wordpress на страницу или в запись из меню правки на странице или записи - tablepress

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

Как импортировать таблицу в WordPress

Если у вас уже есть таблица с данными на другом ресурсе, как, например, в Excel, то вы можете сделать импорт в TablePress.

Для этого перейдите в TablePress › Импортировать.

Импортирование готовой таблицы с данными в WordPress - tablepress

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

После задания опций нажмите кнопку Импорт.

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

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

Как экспортировать таблицу в WordPress

Есть также встроенная функция экспорта данных из таблицы, для этой операции перейдите в TablePress › Экспортировать.

Экспорт готовой таблицы с данными в WordPress - tablepress

У вас будет возможность выбрать формат, в который вы хотите экспортировать данные, будь то CSV, HTML или JSON. Если вы выберете вариант CSV, вам также нужно будет указать разделитель CSV.

Затем нажмите кнопку Сохранить файл экспорта.

Настройка опций вашего плагина

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

Страница Опции плагина TablePress для его настройки

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

Другие плагины для решения вопроса создания таблицы в WordPress

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

1. Плагин Ultimate Tables

Ultimate Tables – это очень простой в использовании и интуитивно понятный плагин. Особенно, если вам нужно создавать только небольшие и простые таблицы, а не оформлять крупные массивы данных.

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

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

2. Плагин wpDataTables

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

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

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

3. Плагин JTRT Responsive Tables

JTRT Responsive Tables – это уникальный плагин для создания таблиц. Он позволяет вам создавать простые адаптивные таблицы HTML5 без знаний HTML или CSS.

Если у вас уже есть файл CSV, то вы можете конвертировать его в HTML за несколько кликов. С редактором WYSIWYG вы можете легко настраивать и делать такие операции как: добавление ссылок и картинок, включение сортировок в таблице, фильтрация или разбивка на страницы.

4. Плагин WP Table Manager

Плагин WP Table Manager предоставляет вам возможность работы с таблицами в WordPress как с электронными таблицами Excel. Если вы пользуетесь для создания таблиц Excel, то этот плагин позволит вам чувствовать себя в полном комфорте.

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

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

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

5. Плагин League Table

League Table – это платный премиум плагин, который был создан с ориентацией на сайты со спортивной тематикой, хотя он может быть использован для создания любых таблиц.

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

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

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

Заключительные мысли

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

У вас есть вопросы о том, как настроить работу TablePress на вашем сайте WordPress? Пожалуйста, поделитесь своим опытом или вопросами в комментариях ниже.

www.hostinger.ru

Как вставить таблицу в запись на 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+ активных загрузок.

pro-wordpress.ru

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

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

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

Месяц Посетители с поиска Посетители с сайтов Прямые заходы Посетители с социальных сетей Посетители с Youtube В общем за месяц
Месяц Посетители с поиска Посетители с сайтов Прямые заходы Посетители с социальных сетей Посетители с 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%)

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

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

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

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

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

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

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

«>

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

«>

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

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

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

«>

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

«>

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

«>

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

«>

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

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

Настройки TablePress

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

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

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

«>

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

«>

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

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

«>

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

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

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

«>

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

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

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

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

«>

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

«>

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

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

«>

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

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

«>

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

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

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

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

«>

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

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

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

«>

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

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

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

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

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

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

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

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

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

Плагин таблицы для wordpress

kostyakhmelev.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.