Как изменить цвет таблицы wordpress

Пользовательские цвета ячеек таблицы в панели администратора WordPress

Я всегда думал, что было бы интересно иметь возможность изменять цвет фона строк сообщений в соответствии с разными критериями в администрации WordPress. Итак, я осмотрелся и нашел несколько руководств по этому поводу. Но плохо то, что в каждом туториале был один и тот же код, вероятно, просто скопировать и вставить. Более того, после нескольких тестов я увидел, что все эти сообщения были неполными. Вот почему я решил углубиться в объяснение того, как добавлять определенные цвета фона в строку сообщений. И для этого мы создадим новый плагин!

Шаг 1. Плагин

Итак, для начала нам нужно создать плагин, как мы видели в моих предыдущих сообщениях, это самая простая часть. Создайте новую папку в wp-content / plugins и назовите ее «color-my-posts». Внутри него создайте новый файл и назовите его…. «Color-my-posts.php» (пожалуйста, не думайте, что у меня нет воображения!). Откройте этот файл и добавьте этот код:

Это просто говорит WordPress о том, что в папке плагинов есть новый плагин под названием «Color My Posts». Теперь ваш плагин, даже если он пустой, должен быть указан в списке плагинов в меню «Плагины». На следующем этапе мы собираемся создать простой класс для создания экземпляра плагина.

Шаг 2: основной класс

Поскольку мы создали класс в моем руководстве по добавлению настраиваемых атрибутов в меню WordPress, нам нужно сделать то же самое и создать класс, вот как это сделать:

Здесь мы создаем класс под названием «rc_color_my_posts», который содержит конструктор и функцию под названием rc_color_my_admin_posts(). В конструкторе мы подключаем функцию rc_color_my_admin_posts () к admin_footer. Это означает, что наша функция будет учтена при загрузке нижнего колонтитула администрирования. Теперь все, что нам нужно сделать, это добавить код CSS в нашу функцию. Этот код будет напечатан непосредственно в исходном коде административных страниц WordPress.

Шаг 3. Стилизация постов

Как я уже говорил, во всех руководствах, посвященных стилю строки сообщений в администрации WordPress, которую я видел, мы имели дело только со статусом публикации. Это правда, вы можете стилизовать строку сообщений по статусу публикации, но не только. Для тех, кому интересно, есть функция get_post_class () в основном файле /wp-includes/post-template.php. На всякий случай – не изменяйте код этого файла (по крайней мере, пока)!

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

Поскольку этот код несложный, я добавил комментарии в сам код. Итак, в основном, чтобы стилизовать строки:

• Статус сообщения, используйте .status-xxx, где xxx – статус сообщения.
• Автор, используйте .author-self для таргетинга на сообщения, которые вы написали, и .author-other для сообщений, написанных другими авторами.
• Формат сообщения: используйте .format-xxx, где xxx – формат сообщения.
• Категория публикации, используйте .category-xxx, где xxx – это ярлык категории, вы можете настроить таргетинг на любое количество категорий.
• Тип сообщения, используйте .xxx или .type-xxx, где xxx – это ярлык типа сообщения, вы можете настроить таргетинг на любое количество CPT.
• Идентификатор сообщения, используйте .post-xxx, где xxx – идентификатор сообщения, вы можете настроить таргетинг на столько сообщений, сколько хотите
• Опубликовать тег, используйте .tag-xxx, где xxx – это ярлык тега, вы можете настроить таргетинг на любое количество тегов.
• .hentry используется для соответствия требованиям hAtom

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

А как насчет липких сообщений?

Когда я работал над этим маленьким плагином, я заметил, что к прикрепленным сообщениям не добавлен класс. Ну хоть в администрации. Итак, я снова зашел в файл post-template.php и увидел, что к прикрепленному посту добавлен класс .sticky, но только если is_home () &&! Is_paged ()… почему? Это действительно странно. Именно по этой причине я создал заявку на основной трек WordPress, чтобы упомянуть об этом. Для тех, кто действительно хочет иметь возможность стилизовать прикрепленные сообщения в админке, просто добавьте этот код в функцию get_post_class (), даже если я рекомендую никогда не изменять файлы ядра WordPress:

Скачать плагин

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

Источник

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

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

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

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

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

Как это выглядит на экране компьютера:
1. Если просто вывести код таблицы:
   Наименование таблицы
   

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

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

Pre добавляет еще больше адаптивности — вместо складывания в столбик появляется полоса прокрутки.

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

Чтобы сделать скриншот на смартфоне Samsung Galaxy, одновременно нажмите и подержите одну-две секунды клавиши «Домой» и «Питание».

Дальше пошли еще минусы:
• по умолчанию она не очень хорошо смотрится — шрифт мельче основного текста (на некоторых темах WordPress), не подсвечены строки через одну и т.д.;
• и самое главное , в нее очень трудоемко вносить данные — попробуйте в коде внести значение 100 ячеек и не ошибиться.

Плагин TablePress

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

В первую очередь было важно, чтобы таблички были:
• красивыми;
• адаптивными (одинаково хорошо выглядели и на мониторе, и на смартфоне, и на планшете);
• в них легко импортировались данные;
• и такие такие второстепенные критерии, как: большое количество активных установок и много хороших отзывов.

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

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

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

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

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

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

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

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

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

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

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

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

В этом разделе можно изменить:
• Строка заголовка. Если первая строка таблицы у вас название колонок — рекомендую включить эту опцию. При этом заглавная строка выделиться жирным и в ней поменяется цвет фона.
• Строка итога. Рекомендую включать когда в последней строке идет подсчет итоговых результатов или средних значений.
• Чередующийся цвет строк. При включенном параметре будет чередоваться фон строк. Рекомендую включить, чтобы таблица не казалось скучной на простом белом фоне.
• Менять цвет строки под курсором. Чтобы таблица казалась более динамичной, включите данный параметр и, когда вы будите проводить курсором мыши над строчкми — они будут немного менять цвет фона. Очень интересное решение.
• Показывать название таблицы пользователю. При включенном параметре будет отображаться название таблицы (сверху или снизу) как заголовок H2 (включая теги, размер и центрирование). Это не очень хорошо с точки зрения SEO, только поэтому данную функцию я не использую.
• Показывать описание таблицы пользователю. Будет показываться описание, введенное на этапе создания таблицы. Оно будет отображаться сверху или снизу по умолчанию простым текстом (что мне не понравилось, так как описание будет сливаться с текстом статьи). В принципе это можно поправить прямо в поле ввода описания, задав там размер, цвет и расположение вручную кодами html).

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

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

В информационных сайтах это обычно не применяется и поэтому я включил только:
• «Использовать в этой таблице активные функции DataTables JavaScript»;
• «Включить горизонтальную прокрутку, чтобы облегчить просмотр широких таблиц».

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

Стили

Данные настройки находятся в разделе «Опции» и помогают настроить оформление таблицы:

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

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

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

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

.tablepress-id-8 .row-4 td

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

При желании можно сжать CSS одним из сервисов, например: csscompressor.com

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

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

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

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

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

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

Способов импорта множество:
• CSV;
• HTML;
• JSON;
• XLS (Microsoft Excel).

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

до

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

При импорте таблицу заранее создавать не нужно — плагин сам создаст ее в процессе импорта.

Шорткоды Table Press

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

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

или в процентах:

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

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

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

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

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

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

[table datatables_fixedcolumns_left_columns=1 datatables_fixedcolumns_right_columns=0 /]

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

Ошибки

Если в таблице Tablepress используются изображения и ни дай бог «накосячишь» с URL изображения хоть на один символ — выходит сообщение об ошибке:
«Внимание: К сожалению, произошла ошибка.
Внешние данные таблицы “Xx” (ID xx) повреждены. Произошла ошибка: Syntax error. Из-за этой ошибки, таблица не может быть изменена, так как это может привести к потере данных.»

В самой записи вместо таблицы видим:
«Attention: The internal data of table “xx” is corrupted!»

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

Решение: удалите таблицу и пересоздайте ее заново.
При этом обязательно нужно выйти из консоли WordPress и войти заново.

Баги и фичи

1. На некоторых темах WordPress не работают пользовательские CSS для TablePress. Вставляешь в соответствующее поле CSS, например для изменения размера шрифта, и ничего не происходит. Ответ нашелся на форуме поддержки Tablepress. Вот ответ разработчика плагина Tobias Bäthge:

Причина этого заключается в том, что что-то на вашем сайте (плагин или ваша тема) отключает загрузку файлов CSS TablePress.

В этом случае ищем поле для пользовательского CSS в самой теме WordPress и прописываем туда стили. В теме WP Jarida — это поле «Custom CSS» в настройках.

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

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

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

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

Исправить это к сожалению никак нельзя (без правки кода самого плагина). Как альтернативу можно использовать не название таблицы, а описание, которое можно вывести сверху/снизу таблицы.

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

ПОСЛЕДНИЙ ОБЗОР ПЛАГИНОВ ТАБЛИЦ ДЛЯ WORDPRESS:

5 лучших плагинов красивых, бесплатных, адаптивных таблиц для WordPress

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

Какие плагины для создания красивых адаптивных таблиц я выбрал для себя

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

Итак, я решил, что сам буду использовать два варианта:

• TinyMCE Advanced. Это не плагин для создания таблиц, а визуальный редактор, но с его помощью легко создавать и вставлять таблички в посты. Таблички неадаптивные, поэтому его можно использовать только для создания небольших табличек с числами. Дизайн изначально симпатичный и его можно настраивать. Да и сам по себе редактор намного лучше базового визуального редактора в Вордпресс;
• TablePress. Самый популярный и часто обновляемый. Дизайн надо настраивать самому. Чтобы таблицы стали адаптивными, необходимо устанавливать дополнительный плагин Responsive Tables. Не могу сказать, что мне этот плагин очень нравится, но это лучшее решение, меньшее из зол.

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

 TablePress. Самый популярный плагин, позволяющий добавлять в Вордпресс красивые таблички, – это TablePress. У него около 3000 отличных отзывов и 500 000 активных установок. Это был самый первый плагин, который я посмотрел, и мне он сначала не понравился, так как он предлагает только один базовый дизайн, который, на мой взгляд, не является красивым. Базовый дизайн таблички видно на рисунке снизу. Кроме того, мне использование этого плагина показалось не очень удобным. Но после того как я пересмотрел много других плагинов, я понял, что этот плагин не так уж и плох по сравнению с другими и, потратив время на его освоение, вы сможете сделать то, что требуется – дизайн можно менять css-кодом, и на сайте разработчика есть подробные инструкции, как это сделать: документация, часто задаваемые вопросы. Эти документы на английском языке, читайте их при помощи переводчика Гугл.

Плагин создает неадаптивные таблички, и чтобы превратить таблички в адаптивные, надо установить дополнительный бесплатный плагин Responsive Tables, который можно скачать только по этой ссылке, на сайте wordpress.org его нет. Я сначала подумал, что он платный, но это просто автор просит перечислить ему донейшн $9, а скачать плагин можно бесплатно. После установки обоих плагинов у вас в админке в левом вертикальном меню появится ссылка TablePress, вам там нужно будет создать новую таблицу и вставить ее код вида table id=1 / в пост. Если вы хотите превратить таблицу в адаптивную, то вам надо добавить дополнительный код (выделен жирным): table id=1 responsive=scroll /. При этом режим адаптивности “scroll” можно поменять на “flip” или “collapse”, как изменится при этом адаптивная табличка, смотрите демо здесь: Responsive Tables.

Если вы хотите зафиксировать ширину столбцов, то Вам надо так поменять код таблицы: table id=1 column_widths=”40px|50px|30px|40px” responsive=scroll /. Если вам надо изменить цвет строки-заголовка, то тогда вам надо вставить следующий CSS-код в специальную форму в настройках таблицы: .tablepress thead th, .tablepress tfoot th { background-color: #ff0000; }. Вставьте вместо #ff0000 свой цвет. Вот базовый дизайн таблицы TablePress:

 Easy Table. 90 000 активных установок. 70 отличных отзывов. Таблички неадаптивные, но при уменьшении ширины браузера появляется полоса прокрутки, что, в принципе, приемлемо. Таблички создаются легко. Дизайн не супер, но в крайнем случае можно использовать, кроме того, можно самостоятельно настраивать внешний вид при помощи CSS, чем я заниматься бы не хотел, хочется брать готовые красивые таблицы. Мне не очень понравилось, что таблички надо создавать в CSV-формате, но в крайнем случае можно пользоваться и этим плагином. Вот как выглядит табличка по умолчанию (в принципе, ничего):

 wpDataTables. Бесплатная версия неадаптивна, платная версия стоит $35 (купить можно здесь: wpDatatables). По последней ссылке есть демо адаптивной таблички, так вот, когда я проверял эту демо-табличку, то адаптивность не сработала, табличка не поместилась на узком экране. Дизайн на меня впечатления не произвел, но понравилось, что можно создавать графики. На сайте wordpress.org всего 10 000 активных установок и 15 хороших отзывов. Не впечатляет, пользоваться не буду! Но позже я обнаружил, что на популярном американском сайте www.wpexplorer.com этот плагин расхвалили как плагин месяца и один из лучших для создания таблиц. Я еще раз проверил демо таблицы на адаптивность – обрезаются все столбцы при сужении экрана(. Дизайн мне не нравится. Проверял опять здесь на сайте CodeCanyon: wpDatatables. На этом сайте плагин продан около 10 000 раз и при этом имеет около 500 хороших отзывов. Может, все-таки я ошибаюсь – адаптивность работает, и таблицы очень красивые?  🙄

 Shortcodes Ultimate. 600 000 активных загрузок. Около 3500 отличных отзывов. Что очень радует, плагин создан нашим соотечественником Владимиром Анохиным. Отличный плагин, если вам требуется вставить на сайт какой-либо так называемый шорткод (владки, буквицу, красивый список, ярлык, кнопку и т.д.). С его помощью можно также вставить и табличку. Предустановленных дизайнов нет, надо настраивать дизайн самостоятельно. Таблички получаются неадаптивные. Вставлять их надо в виде HTML, что неудобно. Я не буду его использовать, так как шаблонов красивых таблиц там нет, и я не нашел, как вставить просто иконку, хотя мне это тоже нужно было. К тому же следующий плагин-редактор лучше, на мой взгляд.

 TinyMCE Advanced. Это не плагин для создания табличек, а продвинутый редактор текстов, который позволяет очень много что сделать. В дополнение ко всему можно вставлять таблички с его помощью. Мне этот инструмент создания табличек очень понравился, так как там все понятно и очевидно, я легко поменял фон и цвет границ и за 1 минуту создал красивую табличку, не покидая свой пост. Одна досада – табличка получилась неадаптивная! Мне очень жаль, так как я готов был остановить свой выбор на этом плагине. И хотя в этом редакторе можно создавать небольшие таблички, придется искать решение для создания больших табличек дальше(… Вот, как выглядит созданная мною табличка за 1 минуту:

 Data Tables Generator by Supsystic. 10 000 активных установок, около 200 хороших отзывов со средним баллом 4.9. Я прочитал хороший отзыв об этом плагине в статье How to Create Responsive Tables in WordPress That Don’t Suck. Таблицы действительно получаются адаптивными, но выглядят не очень хорошо на маленьких экранах. В плагине есть несколько режимов адаптивности: стандартный режим (столбцы идут один под другим на маленьких экранах), режим автоматического скрывания столбцов, режим горизонтальной прокрутки. Более или менее приемлемо выглядит режим горизонтальной прокрутки, остальные режимы смотрятся очень убого. Встроенных шаблонов нет, но дизайн можно настраивать самостоятельно, меняя цвет фона ячеек. В настройках можно поменять язык плагина на русский. В платной версии можно добавить построение графиков и диаграмм. В целом плагин приемлемый, можно пользоваться, но он мне не понравился, пользоваться им неприятно что ли, требуемых задач он не решает. Но тем не менее рекомендовать его к использованию можно.

Плагины, которые превращают обычные таблицы WP-сайта в адаптивные

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

 Magic Liquidizer Responsive Table. 10 000 активных установок, 30 хороших отзывов со средним баллом 4.6. Этот плагин действительно делает таблицы адаптивными, но делает это очень криво. Вместо того, чтобы расположить один столбец под другим, он из первой строки с заголовками сделал столбец и из всех других строк он сделал столбцы, и разместил их один под другим. Я думаю, что этот плагин непригоден для использования. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел.

 Automatic Responsive Tables. Мало того, что этот плагин работает так же, как и предыдущий, так у него еще всего 1000 активных установок и 5 отзывов. Обновлялся плагин больше года назад. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел. Не знаю, мне такое не подходит.

 Responsive Scrolling Tables. 1000 установок, 8 хороших отзывов, обновлялся более, чем два года назад. Плагин создает горизонтальную полосу прокрутки для таблиц с фиксированной шириной столбцов. На удивление, он сработал очень хорошо, добавил красивую полосу прокрутки. И в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший. Я сам им пользоваться не буду, т.е. мне не нравится, что он заброшенный и непопулярный, и его надо бы побольше потестировать, но тем не менее его можно рассматривать как вариант.

Список лучших адаптивных табличек с ценами (прайс-листами) для WP-сайта

Таблички с прайс-листами я не тестировал, так как они мне пока были не нужны. Однако в процессе поиска обычных адаптивных таблиц я собрал список плагинов для установки таблиц прайс-листов на сайт WordPress. В мой список попали только плагины с красивыми табличками, большим количеством активных установок и хороших отзывов. Также я старался смотреть, чтобы плагин не был заброшенным, последний раз обновлялся не так уж давно.
 Easy Pricing Tables. Хороший бесплатный плагин для создания красивых табличек с прайс-листами. Я проверил демо таблиц этого плагина, таблички адаптивные и их адаптивные версии смотрятся очень красиво. У него 30 000 активных установок и 76 очень хороших отзывов. Да и таблички на скриншотах красивые! Еще мне понравилось, что в него уже встроена возможность отслеживать как конверсию в Гугл Аналитикс нажатием кнопки в таблице, но эта опция есть только в платной версии за $59.

Вот еще плагины красивых адаптивных таблиц с ценами:

• Pricing Table by Supsystic (бесплатен, 10000 активных установок, около 100 отзывов со средним баллом 4.5);
• Responsive Pricing Table (бесплатен, 10000 активных установок, около 50 отзывов со средним баллом 4.5);
• CSS3 Responsive WordPress Compare Pricing Tables ($19, 10000 продаж, более 1100 отзывов со средним баллом 4.5);
• Pure CSS Responsive Pricing Tables for WordPress ($18, 1000 продаж, более 250 отзывов со средним баллом 4.0);
• Go Pricing – WordPress Responsive Pricing Tables ($25, 8000 продаж, более 1000 отзывов со средним баллом 4.6).

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

• можно найти тему WordPress с уже встроенными красивыми табличками. Это самый простой вариант, но тему, чтобы она всем устраивала и в ней были хорошие таблички, надо еще поискать. Если вы знаете красивые и функциональные темы с хорошими табличками, поделитесь, пожалуйста, в комментариях;
• можно верстать таблицы вручную. Мне это решение не очень подходит, но многие авторы пишут, что это очень просто. Не спорю, это просто, но я бы хотел концентрировать свое внимание больше на создании контента для таблицы, чем на создании таблицы. Тем более когда возникают ошибки в коде, то порой очень много времени уходит на их поиск и устранение. Как верстать адаптивные таблички, написано в этих статьях на английском языке:
  • How to Create Responsive Tables in WordPress That Don’t Suck;
  • How to Create Responsive Tables in WordPress.

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

Всем привет!

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

Содержание:

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

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

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

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

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

Это самая простая таблица. Для того, чтобы изменять ее вид и расположение, можно задавать элементам дополнительные атрибуты. Например, для <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>

Также для изменения внешнего вида таблиц, можно прописать в файле стилей 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-ссылки.

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

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

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

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

Data Tables Generator by Supsystic

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы собираемся использовать принцип адаптивного дизайна (запрос 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.

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

1. Формат

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

Высота строки и ширина столбца могут быть определены в пикселях. Выберите Формат меню» > «Применить размер столбца/строки » и выберите «Изменить размер столбца/изменить размер строки» . Во всплывающем окне вы можете выбрать диапазон и установить px для столбцов или строк. Нажмите кнопку Готово », чтобы закончить.

2. Тема и параметры сортировки

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

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

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

И вы можете удалить альтернативный цвет, щелкнув параметр «Удалить>  Удалить автоматический стиль» в контекстном меню. Затем цвет будет очищен после вашего подтверждения.

Параметр sortable позволяет выполнять сортировку данных AJAX на веб-интерфейсе. Вы можете увидеть в меню «Формат меню»> «Сортировка» .

Выравнивание таблицы связано с выравниванием div, содержащего всю таблицу, например, по центру всей таблицы. Вы можете найти в Формат меню > Выравнивание таблицы .

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

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

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

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

4. Замораживание строк и столбцов

Замораживание колонки

Закрепление столбца доступно в меню « Формат меню» > «Адаптивные параметры» . Вы можете закрепить до 5 столбцов. Считают с первого столбца.

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

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

Заморозка ряда

Вы можете найти его в меню «Формат меню» > «Заголовок таблицы », здесь вы можете включить опцию и установить закрепление строк (до 5 строк).

Если вы хотите установить высоту стола, вернитесь к параметрам «Адаптивный».

Тогда первая строка будет заморожена на веб-интерфейсе после настройки.

5. Фильтрация данных столбца.

Параметр фильтрации доступен в меню «Формат меню»  > «Фильтры . Вы можете активировать его, щелкнув, чтобы включить поля фильтрации общедоступных данных.

Пример фильтров:

6. Заполнение ячеек и радиус границы.

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

Обратите внимание, что если вы применили тему, некоторые пользовательские CSS будут добавлены автоматически. Вы все еще можете редактировать это, конечно.

7. Пользовательский CSS

Давайте сделаем еще один шаг вперед. Если вы веб-дизайнер с навыками работы с CSS, вы сможете добавить CSS в меню «Формат меню» > «Пользовательский CSS».

Код CSS раскрашен с использованием зеркала кода и может быть написан с меньшим количеством CSS, это тоже работает!

Клетки, линии, столбцы имеют координаты, чтобы идентифицировать каждый из них и применять к нему пользовательские CSS. R — строка, C — столбец.

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

Мои таблицы реагируют или используют прокрутку на небольших устройствах?

Сокрытие Колов

WP Table Manager обрабатывает адаптивный дизайн с помощью приоритетного инструмента, как вариант. По умолчанию адаптивная функция отключена, будет переполнение (хотя ведьма отлично работает на мобильных устройствах). Чтобы использовать «Скрытие столбцов », перейдите в Формат меню» > «Адаптивные параметры».

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

Таблица со свитком (лучше для небольшого количества столбцов)

Таблица со скрытым столбцом (лучше для большого количества столбцов)

Это еще один вариант, если вы хотите вставить таблицу в небольшую область вашего сайта. Вы должны перейти к Формат меню> Адаптивные параметры. Затем выберите «Адаптивный тип» > «Повторяющийся заголовок».

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

• Адаптивная точка останова (px): выберите значение точки останова в пикселях, чтобы определить, когда таблица переключится в этот адаптивный режим.
• Отзывчивая max-height (px): при активации адаптивного режима, в зависимости от значения точки останова, определите max-height, чтобы избежать очень длинной таблицы.
• Стиль адаптивного режима: примените стиль по умолчанию для этого адаптивного режима или используйте цвета таблицы

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

9. Скачать таблицу

Чтобы поделиться своей таблицей с общественностью, вы должны перейти в меню « Формат » и включить Загрузить ». Тогда тип файла будет *.xlsx при загрузке через веб-интерфейс.

Вы можете найти эту функцию в меню «Формат меню» > «Разбивка в каждом табличном издании. Используйте переключатель, чтобы включить и выбрать количество строк для отображения на странице.

11. Оформление границ ячеек

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

В этой статье мы разберем, как сделать таблицу в WordPress. По умолчанию в WordPress нет инструментов для создания таблиц. Опытные веб-мастера используют html теги для вставки таблиц на страницу, но это неудобный и сложный способ. Намного проще воспользоваться плагином TinyMCE Advanced, это визуальный редактор, в его настройках есть функция, которая отвечает за создание таблицы в WordPress. Если вы дочитаете статью до конца, вы узнаете ответы на вопросы «Как вставить таблицу в WordPress» и «Как добавить таблицу в WordPress».

Плейлист «Как создать сайт на WordPress»

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

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

Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «TinyMCE Advanced». Затем нажмите установить и активировать.

После установки плагина в визуальном редакторе появится панель под названием «Таблицы», при помощи которой можно создать таблицу любой сложности. Чтобы сделать таблицу, нажмите на панель «Таблицы», затем зайдите в под пункт «Таблица» и выберите количество строк и столбцов (по умолчанию максимально можно выбрать до 10 строк и столбцов, но в процессе редактирования их можно копировать до бесконечности). Я выберу 10 строк и 10 столбцов:

Затем на станице появится вот такая сетка:

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

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

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

У нас получилось вот такая таблица:

Цвет первой строки должен отличаться от цвета всей страницы, так как обычно там прописывают важные наименования или заголовки. Чтобы изменить цвет любой строки таблицы, нужно выделить строку, нажать на пункт «Таблицы», затем «Строка», затем «Свойства строки таблицы» и «Дополнительно». Точно так же, как и в случае с общим цветом таблицы, выбираем цвет отдельной строки:

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

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

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

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

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

Строка таблицы WordPress. Каждую строку можно настроить так, как вам нужно. Для этого выделите строку, зайдите на пункт «Таблицы», затем «Строка» и сделайте необходимые изменения:

Столбец таблицы WordPress. Каждую строку можно настроить так, как вам нужно. Для этого выделите столбец, зайдите на пункт «Таблицы», затем «Столбец» и сделайте необходимые изменения:

Таблица WordPress html код. Вот html код готовой таблицы, можете скопировать его, вставить в вашу страницу и настроить так, как вам нужно:

<table style="height: 262px; border-color: #0a82fa; background-color: #0a82fa;" width="600">
<tbody>
<tr style="background-color: #1fc41f;">
<td style="width: 53.4667px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок1  </span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок2</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок3</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок4</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок5</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок6</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок7</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок8</span></strong></span></td>
<td style="width: 54.5333px; text-align: center;"><span style="font-size: 6pt; color: #000000;"><strong><span style="font-family: 'times new roman', times, serif;">Заголовок9</span></strong></span></td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
<tr>
<td style="width: 53.4667px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
<td style="width: 54.5333px; text-align: center;">текст</td>
</tr>
</tbody>
</table>

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

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

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
✓ Настройка WordPress
✓ Разработка и создание дизайна сайта самому
✓ Как сделать красивое меню для сайта
✓ Как сделать кнопку вверх для сайта
✓ Как изменить пароль и логин админки WordPress