Бесплатный виджет таблицы Элементор

Элементор не имеет собственного виджета таблицы, в бесплатной или версии Pro. Динамическая таблица является бесплатным виджетом Master Addons, который заполняет этот пробел: вы добавляете ячейки заголовка и ячейки тела в панели Элементор, и он строит реальную таблицу HTML, которую вы можете стилизовать без кода. ячейки могут держать текст, значок или изображение, сливаться между столбцами или строками и извлекать значения из динамических тегов. Он часто используется для расписаний, спецификаций, прайс-листов и каталогов.

Панель "Головка стола" с опциями ячейки заголовка и раскрывающимся падением "Украшение" рядом с таблицей управления задачами команды

Стройте строки и столбцы на панели

Таблица идет от двух ретрансляторов. Ячейка заголовка таблицы содержит один элемент в столбце и Таблица Тело Клетка держит каждую ячейку в порядке чтения, с a Новый ряд? переключатель, который запускает следующую строку. можно перетаскивать элементы, чтобы изменить их порядок, дублировать ячейку или скрыть строку заголовка с помощью Столовая Голова переключатель.

  • Объединенные ячейки: Размах столбцов на клетках заголовка и тела, а также размах строк на клетках тела.
  • Ширина колонки: включите пользовательскую ширину на вкладке Параметры ячейки, чтобы установить ее ширину.
  • Параметры текста для каждой ячейки: выравнивание (слева, в центре, справа или обоснование) и украшение (подчеркивание, оверлайн или сквозная линия).

Стиль заголовка и тела

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

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

Текст, значки, изображения и динамические теги в ячейках

Каждый заголовок и ячейка тела имеют Тип опция: Нет, значок или изображение. значки приходят из библиотеки значков Элементор, и изображения получают Размер изображения в пикселях. текстовые поля принимают динамические теги, в том числе из бесплатного Динамические теги расширение, так что ячейка может показать пост название, пользовательское поле или детали автора. каждый тег заполняет одну ячейку. виджет не зацикливается на сообщениях, чтобы построить строки для вас.

  • Значки в качестве галочек: используйте значок галочки или крестика при сравнении планов или функций.
  • Маленькие изображения: добавьте фотографию или логотип рядом с именем, размер которого указан в пикселях.
  • Динамические теги: извлеките отдельные значения, такие как заголовок сообщения или пользовательское поле.

Глобальный стиль: полосы, границы и углы

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

  • Себры ряды: продолжайте наносить полосы на длинные столы, чтобы за строками было легко следить.
  • Границы: сплошные, пунктирные, пунктирные или двойные линии вокруг клеток.
  • Закругленные углы: Граничный радиус смягчает край стола.
Таблица информационной панели управления задачами команды с зеленым заголовком и шестью строками задач сотрудников

HTML-код таблицы против виджета динамической таблицы

Без табличного виджета обычный способ добавить таблицу в Elementor - это написать HTML самостоятельно в HTML-виджет. Вот как это соотносится с виджетом.

ОсобенностьHTML-виджет с собственным кодомДинамическая таблица главных аддонов
ЦенаСвободный (ядро Элементатора)Бесплатно
Строки и столбцы зданияЗаписать теги таблицы, tr и tdЭлементы ретранслятора на панели
СтайлингСвоя CSSЭлементы управления вкладками стиля
Объединённые ячейкиатрибуты colspan и rowspanПоля "Пролет столбцов" и "Пролет рядов"
Значки и изображения в ячейкахВставить наценкуБиблиотека значков или медиатека
Динамические тегиНетДа, одно значение на ячейку
Макет телефонаСвои медиазапросыСтроки складываются в карты
Сортировка, поиск, импорт CSVНужен сценарий или плагинНет

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

Связанный: Таблица цен (бесплатно), Таблица сравнения (Про) и Динамические теги (бесплатно).

Просмотрщик шаблонов
Фейсбук
Твиттер
WhatsApp
Копировать ссылку
Купить сейчас
Управление задачами
Управление задачами
Динамическая таблица с подтверждением заказа
Динамическая таблица с подтверждением заказа
Сравнение планов
Сравнение планов
Системные требования
Системные требования
Ресторан Меню
Ресторан Меню
Расписание занятий
Расписание занятий
Стоимость доставки
Стоимость доставки
Часы работы службы поддержки
Часы работы службы поддержки

Как сделать стол в Элементоре

На панели Элементор виджет называется Динамическая таблица.

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

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

Узнайте о наиболее часто задаваемых пользователями запросах о Dynamic Table и найдите ответы в одном месте.
Есть ли в Elementor табличный виджет?

Не в самом Elementor, бесплатно или Pro. Master Addons добавляет один бесплатно: виджет Dynamic Table строит таблицу из заголовка и клеток тела на панели.

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

Да, одно значение на ячейку. текст заголовка и тела принимает динамические теги, включая бесплатные Master Addons Динамические теги, такие как заголовок сообщения, пользовательское поле и авторская информация. виджет не создает строку для каждого сообщения, поэтому каждая строка по-прежнему создается вручную.

Что произойдет, если я добавлю очень длинный текст в ячейку?

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

Не с единой настройкой. цвета применяются ко всему заголовку или всему телу. Для таблиц плана Таблица цен виджет (бесплатно) имеет опцию "Выделить" и Таблица сравнения виджет (Pro) создан для сравнения планов.

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

Виджеты и расширения трендовых элементов

Создавайте сложные веб-сайты за меньшее время.

Расширение Master Addons Glassmorphism для Elementor: карты из матового стекла с элементом управления значением размытия, установленным в 20px

Стекломорфизм

Главная Бесплатный элемент Расширение стекломорфизма: эффект матового стекла в одном переключении Стекломорфизм - это матовый...
Посмотреть детали
Расширение Master Addons Container Extras для Elementor: контейнер с максимальной шириной 1400px, с регуляторами максимальной ширины, максимальной высоты, минимальной ширины и минимальной высоты

Дополнительные контейнеры

Главная Элементор Контейнер Максимальная ширина и максимальная высота Контролирует контейнер Дополнительно является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Patterns для Elementor: герой со стилем Purple Gradient Grid Left, еще тремя стилями шаблонов и панелью Enable Pattern

Шаблоны

Главная 70+ бесплатных шаблонов фона элементара - это бесплатное расширение Master Addons, которое добавляет...
Посмотреть детали
Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик

Дубликатор сообщений/страниц

Главная Дублировать страницы Элементор и сообщения в один клик Пост/Пейдж Дупликатор является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Reading Progress Bar для Elementor: синяя полоса на 42% заполнена в верхней части страницы политики конфиденциальности с настройками включения, положения, высоты и цвета заполнения

Прогресс-бар чтения

Главная Добавить панель прогресса чтения в WordPress (Элементор) Панель прогресса чтения бесплатна...
Посмотреть детали