Как добавить таблицу в WordPress?

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

  • Копировать из текстового редактора
  • Использование тегов HTML-таблиц и их настройка с помощью CSS
  • Использование плагина

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

Обычно таблицы создаются с помощью Microsoft Excel / Word / PowerPoint или любого другого эквивалентного программного обеспечения для обработки текста. Вы можете просто скопировать и вставить содержимое таблицы из Excel или Word в визуальный редактор WordPress. Таблица будет отображаться в редакторе со светло-серой рамкой. Внешний вид таблицы в опубликованной статье может различаться в зависимости от стиля вашей темы, и ниже показано, как она будет выглядеть для темы «двадцать шестнадцать» по умолчанию.

Таблица WordPress, созданная с помощью копирования и вставки из Microsoft Word

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

Убедитесь, что кнопка «Вставить как текст» НЕ нажата во время копирования / вставки, чтобы сохранить теги HTML, иначе будет вставлено только текстовое содержимое.

Использование HTML и CSS

Второй способ – использовать теги HTML

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

<table style="height: 205px;" width="551">
<tbody>
<tr>
<td width="185"><strong>Heading 1</strong></td>
<td width="185"><strong>Heading 2</strong></td>
<td width="185"><strong>Heading 3</strong></td>
<td width="185"><strong>Heading 4</strong></td>
</tr>
<tr>
<td width="185">Cell 1</td>
<td width="185">Cell 2</td>
<td width="185">Cell 3</td>
<td width="185">Cell 4</td>
</tr>
<tr>
<td width="185">Cell 5</td>
<td width="185">Cell 6</td>
<td width="185">Cell 7</td>
<td width="185">Cell 8</td>
</tr>
</tbody>
</table>

Таблица в опубликованной статье будет выглядеть точно так же, как в методе копирования / вставки. Но таблицы HTML можно настроить с помощью атрибутов таблицы HTML или с помощью CSS. Например, вы можете добавить цвет границы, цвет фона, изменить размер шрифта, изменить ширину ячеек, объединить ячейки и т. Д., Что невозможно сделать в визуальном редакторе с копией вставленной таблицы.

Недостатки копирования / вставки и HTML-таблицы

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

  • Таблицы не реагируют.
  • Создание нескольких таблиц с одинаковым внешним видом – сложная задача, и отображение на опубликованном сайте будет зависеть от используемой вами темы.
  • Для настройки требуется больше технических знаний об использовании HTML / CSS, а также для добавления CSS требуется дополнительная работа.
  • Невозможно создать сложные таблицы данных.

Создание таблиц с помощью плагина

Если вы хотите, чтобы все таблицы на вашем сайте были одинаковыми, рекомендуется найти плагин для выполнения этой задачи. Найдите «table» в репозитории плагинов WordPress, чтобы найти тысячи бесплатных плагинов. Мы протестировали пару из них и рекомендуем TablePress по следующим причинам:

  • Более 2,2 тыс. Пятизвездочных оценок пользователями с> 300 тыс. Загрузок.
  • Простой, бесплатный и очень удобный интерфейс.
  • Стабильно, не потребляя дополнительных ресурсов.
  • Может создавать таблицы данных с фильтрами и полем поиска.
Плагин WordPress TablePress

  • Функция импорта из Microsoft Excel.
  • Можно настраивать отдельные таблицы с помощью CSS из панели управления.

После установки и активации плагина перейдите к «TablePress> Добавить новый»Меню для создания новой таблицы. Каждая таблица при сохранении генерирует короткий код вроде [table “ltIDgt” not found /]
который можно встроить в любое место вашего сайта.

Параметры плагина WordPress TablePress

Параметры плагина WordPress TablePress

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

Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8

Похожие записи

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

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