Таблицы для сайта на WordPress: популярные плагины и простые решения. Как в wordpress сделать таблицу
Как сделать таблицу в wordpress? |
В сегодняшней статье мы рассмотрим несколько возможностей того, как сделать таблицу в wordpress. Как Вы уже наверняка знаете, стандартная панель управления wordpress не предусматривает такой функции как работа с таблицами, что ставит в тупик множество владельцев собственных интернет-ресурсов.
Оказывается, решить проблему не составляет никакого труда. Ниже будут даны три варианта ответа на вопрос «Как сделать таблицу в wordpress?».
СПОСОБ 1. С помощью плагина MCE Table Buttons.
Скачать этот плагин можно по ссылке. После его установки и активации никаких настроек делать не нужно – плагин уже готов к использованию. Для начала работы с таблицей переходим в визуальный редактор добавления записей и находим значок таблицы, которого до установки MCE Table Buttons у нас не было. Он располагается в нижнем ряду, четвертый значок справа.
Кликаем на него, переходим на пункт меню «Вставить таблицу», после чего нам предлагается выбрать нужное количество строк и столбцов в будущей таблице. Изначально таблица появляется в левой части экрана и первое, что нам нужно сделать, растянуть ее до нужных размеров. Способ работы с таблицей аналогичен microsoft office word и не вызовет особых затруднений. Цепляем нашу таблицу за уголок и (при изменении вида курсора мыши) растягиваем так, как нам нужно.
Итак, мы осуществили главное – сделали таблицу в wordpress! Теперь можно заполнять ее данными, редактировать цвет фона и отступы в ячейках, задавать цвет границы таблицы и так далее. Описывать все в деталях, думаю, не стоит, так как работа в этом плагине ничуть не сложнее, чем в любом текстовом редакторе. Даже если у Вас что-то не получится с первого раза, ничего страшного – потратьте лишних 10-15 минут своего времени и все у Вас обязательно выйдет так, как нужно!
СПОСОБ 2. Без плагина, из редактора microsoft office word.
При выборе этого способа все еще проще. Сначала необходимо создать нужную нам таблицу непосредственно в word, затем просто скопировать ее и вставить на сайт!
Зачем тогда вообще нужны какие-то плагины, если можно обойтись и без них? Дело в том, что при вставке из текстового редактора word у Вас не сохраниться форматирование таблицы, т.е. не будет того цвета шрифта, цвета самой таблицы или ее фона, который Вы изначально задавали в word. Таблица будет иметь вполне стандартный вид, но во многих случаях этого вполне достаточно. Особенно, если учесть тот факт, что таким способом можно сделать таблицу в wordpress всего за несколько минут.
СПОСОБ 3. Создаем таблицу картинкой.
Этот способ многие просто не берут в расчет и, на мой взгляд, совершенно напрасно! Именно благодаря ему Вам не нужно устанавливать на сайт плагины, добиваться нужного форматирования таблицы, разбираться в html-коде и т.д. Достаточно просто создать таблицу в любой знакомой Вам программе (например, word, photoshop и др.), сохранить свое произведение картинкой (.jpg) и вставить в нужное место на сайте! При этом Вы сэкономите немало времени и нервов:
Сдеалть таблицу в word все-таки проще (или просто привычнее), нежели с помощью плагинов;
Полностью сохраниться все форматирование таблицы (цвет и размер шрифта, его начертание, цвет фона и границ таблицы, специальные эффекты – тени, градиенты, обводки и т.д.).
При вставке таблицы в формате jpg Вы получите красиво оформленную, стилизованную под Ваш сайт таблицу, которая, вне всякого сомнения, органично будет смотреться на Вашем блоге.
На этом все и спасибо за внимание! До новых встреч!
Еще статьи по этой теме:
internet-perspektiva.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
Шаг №123.Таблицы в wordpress.Знакомимся с плагином для создания таблиц TablePress.
Привет друзья. Статья сегодня будет посвящена использованию html таблиц в wordpress.После прочтения статьи, любой человек, без глубоких знаний в области html сможет создать простенькую таблицу на своём сайте.Совсем недавно у меня в комментариях проскочил вопрос:
И еще если возможно сделать нормальную таблицу на движке в текстовом редакторе расскажите как.Я сделала таблицу в редакторе NotePad++. Перенесла на сайт и таблица потеряла все вертикальные линии, кроме наружных.Если можно подскажите, Как сделать таблицу на Word Press?
Хочу честно сказать что я с этой проблемой раньше никогда не сталкивался, так как всегда добавлял таблицы в wordpress в ручном режиме через правку html кода ну по старинке через <table>. Но для того что бы добавить простенькую таблицу, нужно более менее хорошо знать язык разметки HTML. Есть выход намного проще — добавить таблицу в wordpress при помощи плагина под названием TablePress.
Устанавливается плагин как обычно в пару кликов, единственное с чем вы можете столкнуться это с вот такой надписью после установки:
Если перевести то, что там написано, то буквально получим следующее — Установленная версия WordPress очень стара для плагина TablePress.Для плагина TablePress требуется версия wordpress поновее. Попробуем разобраться какая версия нужна, и перейдя по ссылке я узнал ,что — 3.8. Окей, обновим версию wordpress, и установим плагин повторно.
После установки плагина перейдем в админку wordpress, и увидим что в левой колонке появился новый раздел TablePress.Итак переходим к самому интересному,к созданию таблицы в wordpress.
Создаем таблицу в wordpress.
Итак перейдем в раздел TablePress и более детально познакомимся с интерфейсом плагина.При самом первом использовании плагина, таблиц у нас соответственно еще нет:
Предлагаю создать какую нибудь тестовую таблицу на wordpress и разместить ее в какой либо записи.Для создания новой таблицы, перейдите на вкладку «Добавить таблицу».
Первый шаг довольно простой, и думаю ни у кого не вызовет трудностей.Вписываем название будущей таблицы, по необходимости заполняем описание таблицы(я в нашем тестовом примере оставлю данное поле пустым).И указываем количество столбцов и строк будущей таблицы.После всех проделанных манипуляций не забудьте нажать на кнопку «Добавить таблицу».
Редактирование ячеек в таблице на wordpress.
После добавления таблицы, пришло время заполнить все ячейки таблицы, перед ее публикацией в статье.Вот такая симпатичная табличка получилась в моём случае:
Для создания простой таблички на wordpress этого вполне достаточно, давайте теперь попробуем опубликовать указанную выше табличку на сайте, для этого нам потребуется получить шорткод wordpress для публикации на сайте.Найти его можно возле информации о таблице:
Копируем данный шорткод, и вставляем его в том месте, где в статье вы хотите вывести созданную страницу.
В итоге после всех проделанных манипуляций я получил вот такую симпатичную табличку на своём сайте:
Дополнительные возможности плагина TablePress.
Если перед вами стоит цель создать более сложную структуру таблицы на wordpress, чем та что указана выше то посмотрите на дополнительные возможности плагина TablePress:
- В ячейки таблицы можно добавлять изображения и ссылки;
- Любые соседние ячейки можно объединять в одну целую;
- Строки могут менять цвет при наведении курсора;
- Чередующийся цвет строк;
- Для таблицы можно прописать пользовательские значения стилей, не изменяя основные значения файла style.css;
- Встроенные возможности по осуществлению сортировки;
- Присутствует возможность осуществлять поиск по таблице;
Следовательно, если разобраться в работе плагина, то можно создать таблицу любой сложности на wordpress.
wpcreate.ru
