1. Формат

На панелі інструментів ви можете встановити стиль для комірки, такий як: шрифт, розмір шрифту, стиль тексту, колір фону для комірки, колір тексту, горизонтальне та вертикальне вирівнювання комірки тощо. Його можна застосувати для однієї або кількох комірок

Ви можете вибрати відсоток для редактора таблиць. Це означає, що ви можете збільшувати/зменшувати масштаб таблиці в діапазоні від 50% до 200%.

Висоту рядка та ширину стовпця можна визначити в пікселях. Будь ласка, перейдіть до Меню Формат > Застосувати розмір стовпця/рядка , потім виберіть Змінити розмір стовпця / Змінити розмір рядка . У спливаючому вікні ви можете вибрати діапазон і встановити пікселі для стовпців або рядків. Натисніть Готово », щоб завершити.

2. Теми та опції

У кожній таблиці ви можете знайти вибору теми в меню «Тема». Просто натисніть на тему, щоб застосувати її.

Альтернативні кольори

У тому ж меню Тема > Альтернативні кольори функція «Автоматичне стилізування» допомагає вам розфарбувати лінію таблиці за допомогою заголовка та нижнього колонтитула . Ви можете вибрати стилі шаблону або створити власні в налаштуваннях плагіна.

А ви можете видалити альтернативний колір, натиснувши «Видалити >  Видалити автоматичне стилізування» в контекстному меню, що відображається клацанням правою кнопкою миші. Після вашого підтвердження колір буде очищено.

Вирівнювання таблиці

Вирівнювання таблиці призначене для вирівнювання div, що містить усю таблицю, наприклад, по центру всієї таблиці. Це можна зробити в Меню Формат > Вирівнювання таблиці .

Підсвічування клітинок

Підсвічування комірок також доступне як опція. Ви можете ввімкнути цю функцію в конфігурації. За замовчуванням вона вимкнена. Ви можете вибрати рядок підсвічування, щоб налаштувати колір та непрозорість підсвічування.

3. Додати підказку до клітинок

У кожній клітинці таблиці ви можете побачити опцію Додати підказку, якщо клацнути на ній правою кнопкою миші.

Ви можете встановити ширину підказки в пікселях. Це перенаправить вас до підказки з редактором для редагування.

Додайте контент і збережіть зміни, все готово, підказка відображатиметься у публічному доступі при наведенні курсора миші.

4. Заморожування рядків і стовпців

Заморожування колонки

Закріплення стовпців доступне в меню Формат > Адаптивні параметри . Ви можете закріпити до 5 стовпців. Рахується від першого стовпця.

Щоб заморозити колір/рядок, є додаткова опція, яка дозволяє фіксувати висоту таблиці (оскільки ваш контейнер таблиці може мати нескінченну висоту).

Коли ви вибрали стовпець для закріплення, ви зможете прокручувати таблицю та завжди відображати фіксований стовпець.

Заморожування рядків

Ви можете знайти його в Меню Формат > Заголовок таблиці , звідси ви можете увімкнути опцію та встановити закріплення рядків (до 5 рядків).

Якщо ви хочете налаштувати висоту таблиці, поверніться до розділу "Адаптивні параметри".

Тоді перший рядок буде заморожений на фронтенді після налаштування.

5. Сортування та фільтри

Якщо ви хочете сортувати або фільтрувати таблицю, перейдіть до Меню Формат > Сортування та фільтри .

Потім з’явиться спливаюче вікно з параметрами сортування та фільтрації. 

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

Наприклад, у цьому випадку виберіть стовпець A з ASC .

Є 2 варіанти фільтра:

• Усередині стовпця: ви можете фільтрувати дані в заголовку кожного стовпця. Кнопка-перемикач допоможе вам показати або приховати поле пошуку в заголовку.

• Форма розширеного фільтра: після вибору опції ви можете шукати та фільтрувати дані в таблиці

Основний пошук: Після ввімкнення цієї функції на інтерфейсі буде додано поле введення пошуку. Це дозволить користувачам легко шукати всі дані в таблиці.

6. Заповнення клітинок та border-radius

Ви можете знайти значок межі на панелі інструментів, який допомагає налаштувати відступи та радіус межі комірки.

7. Власний CSS

Давайте зробимо ще один крок. Якщо ви веб-дизайнер з навичками CSS, ви зможете додати CSS у меню Формат > Користувацький CSS.

CSS-код розфарбовано за допомогою дзеркала коду та може бути написаний з меншою кількістю CSS, це теж працює!

Комірки, рядки та стовпці мають координати для ідентифікації кожної з них та застосування до неї власного CSS. R – це рядок, C – стовпець.

8. Адаптивні таблиці WordPress

Мої таблиці адаптивні чи використовують прокрутку на невеликих пристроях?

Приховування стовпців

WP Table Manager обробляє адаптивний дизайн за допомогою інструмента пріоритету, як опції. За замовчуванням функція адаптивного дизайну вимкнена, виникатиме переповнення (хоча на мобільних пристроях це чудово працює). Щоб скористатися приховування стовпців , вам слід перейти до Меню Формат > Параметри адаптивного дизайну.

Адаптивний режим є розширеним, ви можете визначити пріоритет для приховування стовпців на мобільних пристроях. Коли стовпці приховані, відображатиметься мобільне меню з прапорцем, щоб примусово відображати/приховувати стовпці.
Розмір стовпця фіксується під час редагування таблиці. Якщо розмір усіх стовпців занадто великий для контейнера, ви отримаєте переповнення, і ви зможете легко прокручувати на мобільних пристроях.

Таблиця з прокруткою (краще для невеликої кількості колонок)

Таблиця з прихованою колонкою (краще для великої кількості колонок)

Повторюваний заголовок

Це ще один варіант, якщо ви хочете вставити таблицю в невелику область на вашому сайті. Вам слід перейти до Меню Формат > Адаптивні параметри. Потім виберіть Адаптивний тип > Повторюваний заголовок.

Будуть опції для налаштування відповідно до ваших потреб:

• Адаптивна точка зупинки (px): Виберіть значення точки зупинки в пікселях, щоб визначити, коли таблиця перемикатиметься в цей адаптивний режим.
• Адаптивний режим максимальної висоти (px): Коли активовано адаптивний режим, залежно від значення точки зупинки, визначте максимальну висоту, щоб уникнути дуже довгої таблиці.
• Стиль адаптивного режиму: Застосуйте стиль за замовчуванням для цього адаптивного режиму або використовуйте кольори таблиці

Після цього ви можете побачити, як виглядатиме таблиця на фронтенді.

Якщо ви використовуєте повторюваний заголовок і фільтра , ви можете фільтрувати, вводячи текст у текстове поле в мобільному режимі перегляду.

9. Експорт до Excel

Щоб зберегти таблицю на ПК, вам слід перейти до меню Таблиця та натиснути Експортувати в Excel . Після експорту на фронтенді тип файлу буде *.xlsx.

10. Пагінація

Ви можете знайти цю функцію в меню "Формат" > "Номер сторінки" в кожній версії таблиці. Використовуйте кнопку-перемикач, щоб увімкнути та вибрати кількість рядків для відображення на сторінці.

11. Стилізація меж комірок

Ви можете застосувати типи меж для таблиці, такі як ширина межі, колір межі, стиль межі. Спочатку виберіть діапазон комірок, а потім натисніть на значок на панелі інструментів.

12. Друк таблиці на фронтенді

Іноді вам потрібно роздрукувати таблицю. Тому, щоб відобразити кнопку «Друк» на інтерфейсі, спочатку потрібно перейти до меню «Таблиця» та поставити галочку навпроти кнопки «Друк».