Усі сучасні веб-сайти розроблені для правильної роботи на екрані різної ширини. Раніше таблиці створювали за допомогою звичайного 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 Таблицями та 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 , ви можете легко створювати таблиці, які можна читати на будь-якому пристрої, лише за кілька простих кроків. Крім того, адаптивні таблиці обов’язково забезпечать позитивний загальний досвід для відвідувачів вашого сайту. Отже, спробуйте це та розкажіть нам про свій досвід у розділі коментарів нижче.
