Все современные веб-сайты предназначены для правильной работы на экранах различной ширины. В старину таблицы создавались с использованием простого 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 таблиц WP Table manager . Когда база данных обновляется, ваша таблица автоматически увеличивается! Кроме того, в вашем распоряжении есть параметры сортировки, фильтрации, автоматического проектирования и разбивки на страницы.
Если вы не разработчик, вы можете визуально связать любой материал базы данных с таблицей HTML. Все таблицы в вашей базе данных отображаются при создании новой таблицы из содержимого базы данных.
База данных вашего веб-сайта может выполнять простой поиск и выбирать таблицы и столбцы; это очень полезно для обширной базы данных. Кроме того, здесь есть мастер, который поможет вам шаг за шагом с таблицей из базы данных.
На заключительном этапе, перед предварительным просмотром таблицы из базы данных, вы можете написать свой собственный запрос к указанным таблицам базы данных. Мы поддерживаем некоторые функции, такие как SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
В таблице базы данных иногда бывает много строк; таким образом, эта опция может помочь отобразить таблицу, которая умещается на вашем экране. Кроме того, вы можете установить заранее определенное количество строк таблицы на каждой странице. Кроме того, вы также можете выбрать столбец для сортировки всей таблицы по умолчанию.
Подключение таблицы базы данных WordPress не ограничивается только таблицами WordPress. Все таблицы, которые не из WordPress, но установлены в одной базе данных, могут быть подключены.
Среди огромного количества данных в вашей таблице вы можете создать несколько настраиваемых правил, чтобы сосредоточиться на конкретном объекте. Если вы знакомы с этим, вы можете поиграть с такими операторами базы данных, как>, <, LIKE, IN…
Таблицы из созданной вами базы данных можно редактировать, как и любые другие таблицы (если у пользователя есть доступ к этой полезной функции) (если у пользователя есть доступ к этой практической функции); это очень удобно для пакетного редактирования некоторых баз данных , такие как, экс amp ля, несколько дат после публикации , которые имели бы некоторое время , если все сделано по одному.
Вывод
Таблицы - один из самых эффективных способов продемонстрировать набор информации. Однако для менее технических специалистов создание таблиц на веб-странице является проблемой. Используя эти plugin , вы можете легко создавать таблицы, которые читаются на любом устройстве, всего за несколько простых шагов. Более того, адаптивные таблицы обязательно принесут положительные впечатления посетителям вашего сайта. Итак, попробуйте и сообщите нам о своем опыте в разделе комментариев ниже.
