Все современные веб-сайты спроектированы так, чтобы корректно работать на экранах различной ширины. Раньше таблицы создавались с использованием простого HTML. Поскольку гибкий веб-дизайн стал новым стандартом, базовые таблицы HTML с трудом справляются с требованиями современных веб-сайтов. Поскольку простые HTML-таблицы не адаптивны, содержащийся в них текст чрезвычайно трудно читать на экранах мобильных устройств, поэтому они используются для разработки адаптивных таблиц, макет которых адаптируется в зависимости от размера экрана, на котором они просматриваются. Медиа-запросы HTML и CSS должны использоваться совместно друг с другом.
- Решение 1. Таблицы можно создавать с помощью Divi Builder.
- Решение 2. Используйте plugin таблиц, которые включают эту функцию по умолчанию!
- WP Table Manager
- Интерфейс для WP Table Manager
- Заключение
Таблицы могут быть созданы с удобочитаемым макетом на экранах всех размеров для одного набора информации, который не является слишком огромным или разнообразным, и это может быть достигнуто с помощью базовых подходов HTML и CSS. Однако если таблица предназначена для хранения значительного объема данных, создать удобочитаемый макет на мобильных устройствах или экранах с шириной менее 786 пикселей непросто.
Если веб-дизайнер, работающий с HTML и CSS для создания таблицы, адаптивной для всех размеров экрана, не учитывает количество данных, он, скорее всего, столкнется с проблемами, которые существенно повлияют на читаемость содержимого сайта. Вот несколько советов, которые вы, как дизайнер веб-сайтов Divi, можете применить на практике при попытке создать адаптивные таблицы вручную.
Уменьшив размер таблицы для размещения на меньшем экране, вам потребуется создать несколько классов CSS, каждый из которых ориентирован на определенное разрешение экрана.
Альтернативное решение, которое вы можете сделать, — это скрыть определенные столбцы из таблицы, когда размер экрана меньше.
На экранах меньшего размера вы можете включить горизонтальную или вертикальную прокрутку в верхние и нижние колонтитулы таблицы.
Создайте единую таблицу, которую можно масштабировать под все размеры экрана, и увеличьте ее, чтобы сделать материал более читабельным.
Эти решения требуют значительных усилий, и требования могут различаться в зависимости от контента и размера экрана.
Решение 1. Таблицы можно создавать с помощью Divi Builder.
Компания Elegant Themes подготовила руководство, демонстрирующее, как создавать адаптивные таблицы с использованием встроенных функций Divi. Проверьте это здесь. Они добавили возможность горизонтальной прокрутки к столбцам, которые переполняют контейнер таблицы, что позволяет таблице более оперативно реагировать на ввод пользователя. Вы можете узнать больше, перейдя на страницу руководства:
Решение 2. Используйте plugin таблиц, которые включают эту функцию по умолчанию!
Создание адаптивной таблицы для вашего веб-сайта Divi больше не является проблемой благодаря обилию БЕСПЛАТНЫХ plugin , доступных в репозитории. Однако найти plugin для таблиц со встроенными параметрами адаптивности для мобильных устройств немного сложно. Популярные plugin , такие как wpDataTables, не имеют этой функции в качестве бесплатной опции.
В этой рецензии мы рассматриваем один из лучших plugin WP Tabe Builder.
WP Table Manager
WP Table Manager — единственный plugin таблиц WordPress, который предоставляет полный интерфейс электронных таблиц для управления таблицами. Создайте таблицу, выберите тему и начните редактировать таблицы сразу после их создания. Вы получите полный набор мощных функций редактирования таблиц, включая редактирование ячеек HTML, копирование таблиц, вычисления и синхронизацию с Excel, Google Sheets и Office 365; Конечный пользователь может изменить таблицу так же просто, как щелкнуть ячейку и отредактировать данные с помощью визуального текстового редактора или без него.
WP Table Manager позволяет создавать привлекательные и адаптивные таблицы, используя простой визуальный интерфейс. Это бесплатно. После активации вы перейдете к руководству по настройке. Следуйте инструкциям и внесите необходимые изменения по своему вкусу. Словно по волшебству вы создали красивую таблицу, которая прекрасно отображается на любом устройстве любого размера. Затем все, что вам нужно сделать, это скопировать шорткод и вставить его на страницу, где вы хотите, чтобы он отображался. В настоящее время конструктор предлагает семь элементов (текст, изображение, список, кнопка, звездный рейтинг, собственный HTML-код и короткий код), которые вы можете перетаскивать в заполнители таблицы с помощью функции перетаскивания. Их можно использовать для создания различных типов таблиц, таких как таблицы сравнения продуктов, таблицы цен, таблицы списков и т. д.; это plugin Table, который, как мы обнаружили в ходе нашего расследования, наиболее удобен для новичков. Имейте в виду, что в настоящей версии нет поля поиска или каких-либо других функций фильтрации. Кроме того, если вы собираетесь вводить множество наборов данных или управлять ими, это может быть не идеальным вариантом. Для этого типа сценария использования Visualizer или Tablepress являются отличным выбором.
Интерфейс для WP Table Manager
Вы можете включить короткий код либо в модуль кода, либо в текстовый модуль в Divi.
Тема DIVI включает в себя WP Table Manager .
plugin WP Table Manager отвечает за управление деталями, когда дело доходит до обработки таблиц;
- Как только в вашей таблице активирована опция фильтра, вы можете искать данные в каждом столбце и фильтровать всю таблицу. Он также работает с огромными таблицами, включая нумерацию страниц.
- Стрелки вверх и вниз, представленные в каждом столбце, упорядочят данные таблицы. Упорядочение данных в таблицах также работает в огромных таблицах, включая нумерацию страниц.
- После того как вы создали таблицу со всеми необходимыми данными, вы можете разрешить пользователям сортировать их, но вы также можете установить порядок по умолчанию. Это может быть весьма полезно, когда информация меняется со временем, поскольку после забега вы можете сортировать участников по порядку их прибытия.
- Пагинация необходима, если вы хотите отображать большую таблицу на веб-интерфейсе, сохраняя при этом ресурсы вашего сервера. Выберите заданное количество строк таблицы на каждой странице.
Существует также открытый способ управления документами Excel через импортер файлов Excel WP Table Manager . Однако вы можете импортировать и преобразовывать данные Excel только в виде редактируемой таблицы HTML или импортировать файл Excel со стилем, включающим цвета, фон, размер столбца и ссылки.
Управляйте своей таблицей Excel и публикуйте ее на своем веб-сайте WordPress! Вы можете загрузить файл Excel в таблицу через управление мультимедиа WordPress или FTP-клиент. Затем выберите файл Excel и запустите синхронизацию из настроек таблицы.
Синхронизацию между вашей таблицей WordPress и файлом Excel можно выполнять регулярно, от одной минуты до одного дня. Задержку автоматической синхронизации также можно определить, чтобы избежать нежелательных обновлений общедоступных таблиц WordPress или сэкономить ресурсы сервера для огромной таблицы.
После импорта таблицы все данные могут быть обновлены; это обычная HTML-таблица, которую можно редактировать как plugin ! Таблица WordPress.
С другой стороны, после построения аккуратной таблицы со всеми необходимыми данными вы можете экспортировать ее как обычный файл Excel и, amp , позже повторно запустить обновленный лист Excel. Теперь ваши пользователи могут экспортировать таблицу в виде листа Excel во внешнем интерфейсе WordPress.
WP Table Manager также синхронизируется с Office 365 через OneDrive.
Доступен инструмент импорта и экспорта файлов OneDrive Excel; экономьте время, импортируя и изменяя файлы на ходу. Будьте еще продуктивнее с синхронизацией файлов OneDrive! Выберите файл Office 365 Excel для синхронизации, автоматической настройки, и он появится на вашем веб-сайте.
WP Table Manager помогает создавать и импортировать таблицы из базы данных; теперь он включает в себя инструмент для создания таблиц на основе содержимого базы данных веб-сайта, который ранее был недоступен. Таблицы и столбцы из базы данных выбираются, применяются настраиваемые фильтры, а управление таблицами осуществляется через интерфейс WP Table manager . Когда база данных обновляется, ваша таблица автоматически увеличивается! Кроме того, в вашем распоряжении есть параметры сортировки, фильтрации, автоматического дизайна и нумерации страниц.
Если вы не разработчик, вы можете визуально связать любой материал базы данных с вашей HTML-таблицей. Все таблицы в вашей базе данных представлены при создании новой таблицы из содержимого базы данных.
База данных вашего веб-сайта может выполнять простой поиск и выбирать таблицы и столбцы; это очень полезно в огромной базе данных. Кроме того, здесь есть мастер, который шаг за шагом поможет вам с таблицей из базы данных.
На заключительном этапе, перед предварительным просмотром таблицы из базы данных, вы можете написать собственный запрос к указанным таблицам базы данных. Мы поддерживаем некоторые функции, такие как ВЫБРАТЬ, ЗАМЕНИТЬ, ПЕРЕИМЕНОВАТЬ, ПОКАЗАТЬ, ОБЪЯСНИТЬ, ОПИСАТЬ.
Таблица базы данных иногда содержит много строк; таким образом, эта опция может помочь отобразить таблицу, которая поместится на вашем экране. Кроме того, вы можете задать заранее определенное количество строк таблицы на каждой странице. Более того, вы также можете выбрать столбец для сортировки всей таблицы по умолчанию.
Подключение к таблице базы данных WordPress не ограничивается только таблицами WordPress. Все таблицы, которые не из WordPress, но установлены в одной базе данных, могут быть подключены.
Среди огромного количества данных в вашей таблице вы можете создать несколько собственных правил, чтобы сконцентрироваться на конкретном объекте. Если вы с ним знакомы, вы можете поэкспериментировать с такими операторами базы данных, как >, <, LIKE, IN…
Таблицы из созданной вами базы данных можно редактировать, как и любые другие таблицы (если у пользователя есть доступ к этой разумной функции); это очень удобно для пакетного редактирования некоторых данных базы данных, amp , нескольких дат после публикации, что заняло бы некоторое время, если бы это делалось поочередно.
Заключение
Таблицы — один из наиболее эффективных способов продемонстрировать набор информации. Однако для менее технического человека создание таблиц на веб-странице является сложной задачей. Используя эти plugin , вы можете легко создавать таблицы, читаемые на любом устройстве, всего за несколько простых шагов. Более того, адаптивные таблицы обязательно оставят положительные впечатления у посетителей вашего сайта. Итак, попробуйте и сообщите нам о своем опыте в разделе комментариев ниже.
