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

05 Июня 2017
 

В этой статье мы разберем, как сделать таблицу в 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 документе.

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

Заголовок1 Заголовок2 Заголовок3 Заголовок4 Заголовок5 Заголовок6 Заголовок7 Заголовок8 Заголовок9
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст

Ячейка таблицы 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

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

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

*

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

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru