Обзор 6 лучших плагинов для создания таблиц в WordPress. Wordpress таблица
Таблица в wordpress. Лучшие плагины для создания таблиц в WordPress
WordPress не включает в себя функцию добавления таблиц с данными в ваши записи и страницы. Однако существует множество плагинов, которые были разработаны, чтобы дать вам возможность отображать таблицы на вашем сайте.
В этой статье мы рассмотрим некоторые наиболее популярные табличные плагины WordPress для добавления обычных таблиц на ваш WordPress сайт, а также некоторые другие плагины, которые могут добавлять различные типы таблиц на ваш сайт или использовать внешние источники данных для заполнения этих таблиц.
Плагин 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"Автор больше не поддерживает развитие своего творения 8(Лучше это или нет – решать вам. Однако в создании таблицы «на лету», в процессе записи, есть свои преимущества.
Другие особенности от лидера Easy Table, которые могут соблазнить вас:
- Добавление таблиц в виджеты
- Создание динамических таблиц из CSV-файла
- WYSIWYG, надёжный переключатель вида, не нарушающий таблицу
- Установка фиксированной ширины таблицы
- Ячейки могут занимать несколько столбцов и строк
- Сортировка нескольких столбцов с помощью параметров короткого кода
Действительно, нелегко выбрать между Easy Table и TablePress в оценке их стандартных функций, вы сами можете выбрать предпочтительный способ создания таблиц – с помощью отладчика TablePress или с помощью шорткодов Easy Table.
Плагин WPDATATABLES
В то время, как два вышеперечисленных варианта прекрасно подходят для тех, кто хочет быстро создать таблицу в WordPress а затем опубликовать её в записи или на странице, wpDataTables – это плагин, который делает совершенно другие вещи.
wpDataTables - Tables and Charts Manager for WordPressПоследнее Обновление: 06.06.2018
Автор: tms-plugins
165 Нравится
16,901 Продажи
93,4%Рейтинг 16,901Продажи $45Стоимость
wpDataTables позволяет использовать данные из файла или таблицы базы данных для заполнения таблиц и графиков, которые вы публикуете на вашем WordPress сайте.
Коротко, преимущества и особенности wpDataTables включают в себя:
- Создание динамических таблиц, которые обновляются, когда есть источник данных
- Добавление фильтрации, сортировки, печати и экспорта параметров для вашей таблицы
- Создание диаграмм из внешних источников данных
- Использование Excel, CSV, MySQL-запросы и другое в качестве источника данных
- Настройка внешнего вида таблицы
Как и в плагине TablePress, в wpDataTables таблицы и графики создаются и управляются независимо от записей и страниц WordPress – в определённом месте панели администратора – и затем вставляются в контент с помощью шорткодов.
Если вы хотите создавать таблицы и диаграммы с данными, хранящимися вне WordPress, то премиум плагин wpDataTables – это отличный выбор, который на удивление прост в использовании.
GOOGLE CHART WORDPRESS PLUGIN
Если вы хотите добавлять диаграммы в ваши записи и страницы, но вам не нужны инструменты таблицы, то плагин Google Chart WordPress – это именно то, что вам нужно.
Последнее Обновление: 19.12.2013
Автор: sike
1,589 Нравится
304 Продажи
61,8%Рейтинг 304Продажи $10Стоимость
Это премиум плагин, но он стоит лишь $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Последнее Обновление: 19.11.2017
Автор: DAEXT
161 Нравится
1,657 Продажи
95,4%Рейтинг 1,657Продажи $23Стоимость
Эти виды таблиц часто используются для сравнения спортивных команд или отдельных лиц, организаций, государств или компаний для ранжирования их в порядке способностей или достижениий.
Некоторые особенности плагина League Table:
- Сортировка таблицы по нескольким столбцам
- Использование цветовой палитры для настройки таблиц
- Мобильный удобный дизайн
- Вставка таблиц с использованием коротких кодов
Хотя это премиум плагин, но если у вас есть необходимость добавлять такие таблицы на ваш сайт, то это доступный вариант, который содержит все функции, которые вам необходимы.
ЗАКЛЮЧЕНИЕ
Надеемся, что теперь вы нашли тот плагин для создания таблиц в WordPress, который может добавить на ваш сайт ту таблицу или диаграмму, которую вы хотите.
Если вы хотите создавать свои таблицы непосредственно в ваших сообщениях или в вашей админке WordPress, чтобы потом вставлять их в контент, или использовать внешний источник данных, то здесь вы можете найти то, что вам для этого необходимо.
Если вы знаете другие интересные способы добавления таблиц и диаграмм для WordPress, пожалуйста, оставьте ниже свой комментарий.
clubwp.ru
Как сделать (вставить) таблицу в WordPress блог
Здравствуйте, дорогие читатели SeoKos.ru! Сегодня мы поговорим о том, как вставить таблицу в wordpress блог. Думаю, каждый блоггер рано или поздно сталкивался с такой проблемой, ведь одним кликом, к сожалению, функционалом движка, это не предусмотрено. Сейчас мы поговорим о двух способах такой вставки различных таблиц.
Ни для кого не секрет, что в данный момент я выполняю один заказ – создание блога (подробнее о нем я скажу в отчете за январь). Так вот при выкладывании материалов на блог, я столкнулся с проблемой вставки таблицы на проект. К сожалению, в стандартном окне редактирования записей нет волшебной кнопки «Таблицы».
Немного походив по Рунету я все же нашел способ – сделать с помощью специального плагина (об этом ниже Способ №2). Но мы же знаем, что плагины значительно нагружают блог и снижают скорость загрузки сайта. Поэтому я решил поискать еще что-либо и нашел очень легкий способ без всяких накруток. Нужно лишь выполнить пару команд и отредактировать с помощью html.
Для чего нужны таблицы?
Глупый конечно вопрос для чего нужны таблицы в блоге, но все же давайте разберем.
Таблицы служат для компоновки каких-либо данных. Для их сортировки и красивому отображению. Давайте, как всегда взглянем на примеры:
1. Вы ведете блог своей компании. На нем выкладываете статьи с картинками, текстом и прайс-листом. Прайс-лист – это документ, в котором написаны цена на товар, услуги и т.д. Так вот, принято прайс-лист делать в виде таблицы. Во-первых, это удобно, а во-вторых, очень красиво выглядит.
2. Вы решили провести конкурс на блоге. По окончанию конкурса, результаты необходимо вписать в отдельную статью. Как Вы думаете, будет лучше сделать: вписывать просто текстом (друг за другом) или же сделать красивую таблицу и аккуратно вписать результаты? Однозначно, лучше сделать таблицу!
Думаю я Вас убедил, что использовании таблицы очень важно! А теперь приступим непосредственно к главному.
Как сделать таблицу в WordPress: Способ №1
Первым делом мы разберем способ создания таблицы без плагина. Для этого необходимо сделать нужную Вам таблицу в программе Microsoft Word
Далее нужно выделить (CTRL+A) и скопировать ее (CTRL+C)
После чего заходим в окно редактирования записи в WordPress и нажимаем на кнопку «Вставить из Word», вставляем туда содержимое буфер обмена (CTRL+V) и нажимаем «Вставить»
После чего таблица вставляется, но очень корявая и некрасивая. Это необходимо исправить! Для этого заходим в редактирование записи через html, находим таблицу и делаем следующие:
1. Находим строчку <table (вместо звездочек какой-то число) border="1" cellspacing="0" cellpadding="0">
2. И перед ней (строчкой) вставляем тег <p>
3. Далее находим тег, который закрывает таблицу </table> и вставляем после него </p>
Теперь сохраняем запись и радуемся. Таблица в статье готова!
Как сделать таблицу в WordPress: Способ №2
Этот способ так же рабочий и эффективный! Отличается лишь тем, что необходима установка плагина MCE Table Buttons. А как нам уже известно плагины нагружают блог. Кстати, в скором времени собираюсь начать выпускать серию статей «Как ускорить блог: Избавляемся от плагинов"
- Скачиваем плагин по ссылке;
- Устанавливаем и активируем его;
- Ничего настраивать не нужно, можно переходить сразу к созданию таблиц. Переходим в визуальный редактор записи и видим, что появились специальные значки;
- Чтобы начать создание таблицы, нужно нажать на первую кнопку в этом строке. После чего открывается окно создания таблицы;
- Настраиваем поля:
Columns — Количество колонокRows — Количество строкCell Padding — Отступы от ячеек до содержимогоCell Spacing — Расстояние между ячейкамиAlignmen — Выравнивание таблицыBorder — ТолщинаWidth — ШиринаHeight— ВысотаTable Caption — Заголовок таблицыBackground Image — Фоновое изображениеFrame — Отображение рамкиRules — Внутренняя сетка таблицыBorder Color — Цвет обводкиBackground Color - Фон таблицы
Вот и все, таблица готова! Только стоит помнить, что для нее необходимо наличие плагина. Если плагин удалить, то все таблицы перестанут отображаться. Поэтому рекомендую использовать первый способ.
На этом данная статья подходит к концу! Теперь мы знаем, как сделать таблицу в wordpress в блог и умеем это делать. Поздравляю! Да, кстати, чуть не забыл – посмотри на пример:
Пример1 | Пример2 | Пример3 | Пример4 | Пример5 | Пример6 |
Пример1 | Пример2 | Пример3 | Пример4 | Пример5 | Пример6 |
Если возникнут какие-то вопросы, пишите в комментариях – с удовольствием отвечу! До скорого!
С уважением, Константин Белан.
Рубрика: Настройка блога
- 5
- 4
- 3
- 2
- 1
Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок: Подпишитесь на обновления блога и будьте в курсе всех новых статейseokos.ru
Как сделать адаптивные таблицы в Wordpress: основные методы
Всем привет!
В сегодняшнем обзоре мы поговорим о том, как добавить таблицы на сайт на WordPress. Мы рассмотрим разные варианты их установки: с плагинами и без. Основное внимание уделим созданию адаптивных таблиц, ведь правильное отображение сайта на мобильном устройстве — важнейший фактор успеха вашего ресурса. Читайте о мобильной версии блога на WordPress, о его адаптивности.
Содержание:
- Способы добавления таблиц в запись вручную
- Основные плагины
- Как сделать адаптивные таблицы для 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>
Строка 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>
Строка 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. После его активации появляется такая кнопка (см. скриншот):
Здесь можно выбрать следующие свойства таблицы, строк, ячеек: ширина и высота, отступы между ячейками и в ячейках, толщину рамки, выравнивание текста, стиль, цвет границы и фона.
Этих функций достаточно для создания простой таблички в статье. В ячейки можно вставлять как текстовый контент, так и изображения.
TablePress
Очень популярный плагин TablePress, ранее он назывался WP-Table Reloaded, считается одним из лучших для вставки таблиц для сайтов на WordPress. Он поддерживает функцию загрузки и импорта таблиц в форматах csv, excel, html, json. В них можно вставлять любой контент, включая формулы. В TablePress есть функции сортировки, фильтров, дублирования строк и столбцов, пагинации (разбивка на страницы). Здесь есть базовый дизайн таблиц, вот такого вида:
Менять css-стили таблиц можно в разделе Plugin Options.
После создания таблицы, включая все необходимые вам настройки, вы получите шорткод, который можно вставить на страницу или в запись блога.
Но данный плагин по умолчанию создает неадаптивные таблицы. Для того, чтобы добавить функцию адаптивности, потребуется устанавливать дополнительный плагин от разработчиков TablePress – Responsive Tables — https://tablepress.org/extensions/responsive-tables/. Это расширение бесплатное. После того как установлен основной плагин и расширение, для создания адаптивной таблицы потребуется изменить полученный в TablePress shortcode на шорткод вида:
[table id=123 responsive=mode /]
Где вместо “mode” нужно вставить одно из трех возможных значений: flip, scroll, или collapse. К примеру, вот так будет выглядеть режим scroll:
Здесь таблица прокручивается по горизонтали, а шапка расположена сверху. В случае с режимом 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-ссылки.
Но для лайт-версии существует ряд ограничений. Вот основные из них:
- Таблицы неадаптивные;
- Максимальное количество строк – 150;
- Нет поддержки MySQL;
- Нет конструктора таблиц, доступного в премиум-версии.
Оценки у данного плагина для таблиц на 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; }Теперь элементы таблицы приобретут свойства блоков, и при уменьшении экрана, ячейки будут переноситься и располагаться друг под другом.
Приведем более развернутый пример. Предположим у нас есть такая таблица:
Ее неадаптивная версия на мобильном телефоне будет отображаться вот так:
Оба варианта не читабельные.
Мы собираемся использовать принцип адаптивного дизайна (запрос 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.
До новых встреч!
pro-wordpress.ru
Как сделать таблицу в вордпресс
Разработчики HTML-кодирования продумали все, кроме удобства добавления таблиц. Пользователям очень неудобно добавлять префикс, открывающие и закрывающие теги и при этом еще и следить за стилем выкладываемой таблицы. Это долго, это нудно, с этим легко можно ошибиться. И поскольку язык HTML никто менять не собирается, нужно искать собственные методы как вставить таблицу в WordPress быстро и удобно.
В данной статье таких методов будет продемонстрировано аж 6 — это лучшие плагины для работы с таблицами.
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. Им легко пользоваться, если приловчиться. Запомните:
- Столбцы разделяются запятыми;
- Строчки фиксируются пробелами.
Может показаться, что это неудобно и вы лишь потратите время. Но на деле 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 создается в разделе "Добавить новую". Вы перейдет на страницу, где нужно задать название таблицы и проставить нужное число строк и столбцов. Каждой строке и столбцу будет присвоено Имя (столбцам - буква, строкам - номер). Потянув за имя строки или столбца, можно легко перемещать их, меняя местами.
Информация о таблице
В отделении "Информация о таблице" вы можете взять шорткод, вида для вставки его в страницу или запись в то место, где должна выводиться данная таблица. Здесь же можно изменить название таблицы на другое.
Содержимое таблицы
Отделение "Содержимое таблицы" предназначено для заполнения таблицы информацией. Вы уже знаете, что можно импортировать готовые таблицы из файлов разных форматов, а далее в разделе Работа с таблицей, вы узнаете, как проще и легче наполнить новую, пустую таблицу данными.
Работа с таблицей
В отделении "Работа с таблицей" вы можете добавить, удалить или объединить строки, столбцы и ячейки. Также строки и столбцы можно дублировать.
С помощью Расширенного редактора, можно быстро и легко вставлять медиафайлы и работать с текстом. Для этого нужно выбрать нужную ячейку, нажать на нее и после этого нажать на кнопку расширенного редактора.
Параметры с таблицы
В отделении "Параметры с таблицы" можно галочками задать дополнительные настройки. Обычно, хватает настроек выставленных по умолчанию (хотя, бывает, что нужно подсчитать итоги).
Настройка функций DataTables JavaScript
В отделении "Настройка функций DataTables JavaScript" можно подключить удобные, но не всегда полезные функции для таблиц небольшого размера. Доступны такие функции как: сортировка таблицы, выборка, разбивка на страницы (если таблица очень большая), а так же можно вставить свой JS скрипт, который будет орабатывать данные так как вы запланируете. Выключаются все функции снятием галочки в разделе "Использование активных функций DataTables".
i-won.ru
Wordpress таблицы - способы вставки, редактирования
Часто на сайтах приходится работать с таблицами. И вордпресс не исключение, но увы и ах, «из коробки» вордпресс имеет очень скудный функционал для работы с таблицами. Рассмотрим несколько способов.
Вставка таблицы прямым копированием.
Например из программы Microsoft Word. Тут все просто — выделяем таблицу в ворде, копируем (ctrl+c):
и вставляем в визуальный редактор вордпресса (ctrl+v). Просто, как раз-два-три.
Минус этого способа в том, что из ворда копируется не только таблица, но и стили. Поэтому результат может быть ооочень непредсказуемым — таблица может абсолютно отличаться внешним видом от той, что задан в шаблоне. Чтобы избавиться от лишних стилей — таблицу нужно открыть в редакторе html — вот только иногда в коде таблицы, скопированной из ворда, такая каша из стилей, что разобраться новичку бывает сложно.
Вставка HTML кода таблицы.
Тут все просто — пишем html теги таблицы, и вставляем их в шаблон.
<table> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> <tr> <td>Значение 1</td> <td>Значение 2</td> </tr> </table>В этом случае таблица будет в точности такой, как задано в шаблоне, код таблицы будет чистым. Единственное «но» — нужно «дружить» с HTML разметкой. Хотя конечно, знание html тегов не помешает в любом случае.
Плагин TinyMCE Advanced
Этот плагин значительно расширяет возможности стандартного Вордпресс-редактора. В частности, появляется средство для добавления таблиц. В визуальном режиме. Устанавливаем плагин, активируем и смотрим:
Появились меню вставить таблицу, ячейка, строка и прочие, позволяющие добавлять таблицу в визуальном режиме. Все оочень просто и интуитивно понятно. Для редактора, не знакомого с разметкой — лучший выбор. И даже человеку, знакомому с версткой, данный плагин будет хорошим подспорьем. В общем — маст хэв.
codesweet.ru
Таблицы wordpress, плагин wordpress таблиц
Здравствуйте, сегодня в уроке пойдет речь о таблицах wordpress. Я расскажу, как сделать таблицу wordpress при помощи html и как настроить wordpress таблицу, и расскажу о плагинах таблиц wordpress.
Сперва хочется сказать о внешнем виде вашей панели для редактирования записей. Если она выглядит так:
То скорее прочитайте статью плагины для работы с текстом wordpress. В принципе из этой статьи вам понадобится плагин WordPress TinyMCE Advanced, который обязательно нужно установить. С ним вам гораздо будет легче понять данную статью. ( не забудьте настроить данный плагин — в админке выберите Параметры -> TinyMCE Advanced и перетащите на серую полосу значок с видом:
После чего сохраните настройки. Все теперь вы готовы читать статью далее) Если у вас есть трудности, то прочитайте статью как установить плагины wordpress
Таблицы WordPress
Создадим новую статью, теперь на нашей панели нам нужно выбрать значок для создания таблицы (стрелкой отмечена кнопка для создания таблицы) сейчас, как вы видите подсвечена 1 кнопка:
Нажав на нее появится окошко:
В принципе, самое основное это «столбцы» и «строки», задав их получится следующее:
Для создания записи нажимаем в нужное окошко. Также после нажатия на таблицу будут доступны и подсвечены все кнопки для работы с таблицей.
Просто наведите на любую кнопку мышкой, после чего высветится подсказка.
Итак, вот пару мини-инструкций по работе с таблицей. Перечислю о чем будут они (1. объединить — разъединить ячейки; 2. добавить строку до/после, добавить столбик, удаление строк и столбиков; 3. изменить цвет ячейки, строки, любого участка таблицы.)
1. Объединение — разъединение ячеек
Просмотреть скрытый текст »
Допустим есть строка Прайс магазина, которую надо сделать целой. Для этого выделяем строку мышкой (удерживаем и выделяем все те ячейки, которые хотим объединить)
После чего будет:
Для разъединения используйте соседнюю кнопку справа. Но лучше, если хотите вернуться на несколько шагов назад, используйте кнопку:
2. Добавить строку до/после, добавить столбик; удаление строк и столбиков
Просмотреть скрытый текст »
Нажимаем мышкой в ту область таблицы, в области которой необходимо сделать изменения (добавить элемент таблицы до или после)
Назначения кнопок. Кнопки пронумерованы на скриншоте ( кстати, кому интересно прочитайте статью как сделать скриншот экрана)
1. Вставить строку до ( нажимаем мышкой на существующую строку, перед которой хотите вставить новую строку)
2. Вставить строку после
3. Удалить строку ( нажмите мышкой на ту строку, которую хотите удалить, после чего нажмите на кнопку)
4. Вставить столбец до (нажмите имеенно на ячейку в таблице, нажав на нее мышкой, слева от нее появится столбец)
5. Вставить столбец после (нажмите на нужную ячейку, после чего нажмите на кнопку, справа появится столбец)
6. Удалить столбец (нажмите мышкой на столбец, который хотите удалить, нажмите кнопку удалить столбец)
3. Изменить цвет ячейки, строки, любого участка таблицы.
Просмотреть скрытый текст »
Для начала выделите мышкой те ячейки, цвет которых хотите изменить. (они будут подсвечиваться синим цветом после выделения), после чего нажмите на кнопку «Свойства ячейки таблицы» (отмечено на скриншоте)
После этого появится окошко с настройками:
Сразу переходим на вкладку Дополнительно
Здесь можно выбрать либо «Цвет границы» или «Цвет заливки» просто нажимаем на прямоугольную рамку. После чего появится окошко с цветами, удерживая мышкой ведем по цвет и выбираем подходящий, далее нажимаем применить:
В итоге наши ячейки окрасятся в цвет:
Плагин таблиц для WordPress
Теперь хочется рассказать о плагин таблиц WordPress. Думаю, что плагин подойдет особенно тем, кто хочет сделать интернет магазин на WordPress или создавать таблицы для сравнения.
Плагины создают очень красивые таблицы с подсветкой, сортировкой и множеством других фич.
Первый плагин называется WP-Table Reloaded — мощный плагин, позволяет создавать качественные таблицы, которые можно использовать для товаров, прайс листов и других целей.
Скачать плагин — http://wordpress.org/plugins/wp-table-reloaded
Также есть другой плагин, который очень похож на предыдущий, и обладает таким же функционалом — TablePress.
Скачать плагин — http://wordpress.org/plugins/tablepress
Вот примеры, что получилось сделать при помощи этих плагинов
iglous.ru