Как создать таблицу на элементоре (4 способа, с шагом)

Ключевые выводы

• У Elementor нет виджета таблицы в основном плагине или в Elementor Pro, поэтому таблица в Elementor поступает из HTML-кода, контейнеров, плагина таблицы или виджета дополнения.
• Виджет HTML - это способ создать таблицу в Elementor без плагина: вставить таблицу, tr, th и td теги и добавить короткий блок стилей для границ и заполнения.
• Контейнер Grid может имитировать таблицу, но для таблицы из 3 столбцов и 4 строк требуется 12 отдельных виджетов текстового редактора, и в результате получается не настоящая таблица HTML.
• В TablePress 3.4 добавлен собственный виджет Elementor под названием TablePress Table, а его таблицы могут сортироваться, искать и размещаться на страницах посетителей.
• Виджет Master Addons Dynamic Table строит настоящую HTML-таблицу из ячеек заголовка и тела на панели Elementor и складывает строки в карты на устройствах шириной до 768px.

Для создания таблицы в Elementor вам нужен обходной путь, т.к. Elementor не поставляет табличный виджет. четыре, которые работают, - это HTML-виджет с вашим собственным кодом, Grid-контейнер, таблица TablePress и дополнительный виджет, такой как Динамическая таблица.

Мы построили таблицу в каждом из четырех способов на Elementor 4.3 и просмотрели каждую на рабочем столе и в телефоне.

Есть ли у Элементора табличный виджет?

№ Поиск “table” в панели Элементор и единственные встроенные результаты являются Содержание и Таблица цен, и оба принадлежат Elementor Pro. ни один из них не делает строки и столбцы данных Таблица цен является единой картой цен, и Содержание перечисляет заголовки на странице.

Каким способом следует воспользоваться?

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

Способ 1: Создайте таблицу в Elementor с помощью виджета HTML

Это способ сделать таблицу в Elementor без плагина Вы пишете простую таблицу HTML и Elementor печатает ее такой, какая она есть.

1. Отредактируйте страницу с помощью Elementor и перетащите ее HTML виджет в контейнер.
2. Вставьте код ниже в HTML-код поле.
3. Изменить текст между тегами Каждый tr это ряд, каждый th является ячейкой заголовка и каждой td является клеткой тела.
4. Нажмите Публиковать.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

Стол легкий и настоящий table элемент, который понимают поисковые системы и программы чтения с экрана. Однако его сложнее поддерживать. Клиенту, желающему добавить строку, приходится редактировать HTML, а отсутствующий закрывающий тег нарушает макет.

Способ 2: Постройте стол с помощью контейнера Grid

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

1. Добавить контейнер и установить Планировка контейнера чтобы Сетка.
2. Набор Столбцы к количеству столбцов, которые вам нужны и Ряды к количеству строк включен заголовок.
3. Набор Пробелы до 0, чтобы клетки соприкасались.
4. Перетащите один Текстовый редактор введите виджет в каждую ячейку и введите ее текст.
5. На каждом виджете открыт Продвинутый, затем добавьте Набивка и 1px Граница. Придайте ячейкам заголовка цвет фона.

Количество виджетов быстро растет Три столбца и четыре строки уже нуждаются в 12 виджетах, а таблица 5 на 10 нуждается в 50.Границы удваиваются там, где встречаются клетки, если вы не настраиваете каждую сторону. выход представляет собой набор divs, поэтому программа чтения с экрана не объявляет его в виде таблицы. Сохраните этот метод для горстки ячеек.

Способ 3: Добавьте таблицу TablePress в Elementor

TablePress - это плагин таблицы с более чем 600 000 активных установок. Вы собираете таблицу на собственном экране администратора, а затем помещаете ее в Elementor. Это правильный выбор для длинных таблиц, поскольку он импортирует файлы Excel, CSV, HTML и JSON и позволяет посетителям сортировать, искать и просматривать строки.

1. Установить и активировать СтолПресса.
2. Перейти к СтолПресса, тогда Добавить новый чтобы набрать таблицу, или Импорт чтобы загрузить файл.
3. Сохраните таблицу и отметьте ее идентификатор.
4. Отредактируйте свою страницу с помощью Elementor и найдите СтолПресс. Втащите виджет и выберите таблицу в Таблица выпадающий.
5. Если вы предпочитаете короткий код, перетащите его Шорткод виджет и введите [table id=1 /] с собственным удостоверением личности.

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

Способ 4: Используйте табличный виджет

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

1. Установите главные дополнения и проверьте это Динамическая таблица включается в настройках виджета.
2. Отредактируйте страницу с помощью Elementor, найдите Динамическая таблица и перетащите его в. Он начинается с выборочной таблицы из четырех столбцов.
3. Открытый Столовая Голова. Добавить один Ячейка заголовка таблицы по столбцу и введите каждый Имя столбца.
4. Открытый Тело стола. Добавить один Таблица Тело Клетка на ячейку слева направо Включите Новый ряд? на первой ячейке каждого ряда после первого.
5. Чтобы объединить ячейки, откройте ячейку Опции вкладка и набор Пролет колонны или Рядный пролет.
6. Стиль заголовка, корпуса и полос в Стиль вкладка, затем публикация.

Каждая ячейка может содержать текст, значок или изображение, а текстовые поля принимают динамические теги. Адаптивный стол? в разделе Настройки по умолчанию включено, поэтому на устройствах шириной до 768px каждая строка становится картой с именами столбцов в качестве меток.

Хотите увидеть его, прежде чем что-либо устанавливать? выше Страница "Динамическая таблица" имеет три живых стола и восемь демо-макетов, которые вы можете открыть.

Динамическая таблица не сортирует, не ищет, не вводит страницы и не импортирует файлы. Каждая ячейка вводится вручную, что хорошо для 30 ячеек и утомительно для 300, поэтому для больших наборов данных вернитесь к Пути 3.

Ошибки, которых следует избегать

• Построение таблицы в виджете Text Editor. У него нет кнопки таблицы, поэтому вы в конечном итоге пишете HTML на вкладке "Текст" в любом случае. Виджет HTML - более чистое место для этого кода.
• Использование виджета цен для данных. Таблица цен и Таблица цен виджеты строятся для планов с кнопкой купить Они неправильная форма для строк данных.
• Забывая телефоны. Таблица из пяти столбцов редко подходит для экрана 390px. Решите, следует ли строкам стекать, прокручивать вбок или терять столбец.
• Построение 50 ячеек из виджетов. Если для метода сетки требуется более десятка виджетов, переключитесь на реальную таблицу.

Часто задаваемые вопросы

Заключительные мысли

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

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

Связанное чтение

• Советы таблицы цен на элементар
• Лучшие плагины для WordPress