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