Перейти до основного вмісту

WP Table Manager : Таблиці стилів

1. Формат

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

 

таблиця стилів

 

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

 

збільшення-віддалення

 

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

 

resize-column

 

2. Теми та варіанти

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

Застосування теми замінить усі дані та стиль у вашій таблиці. Тож спосіб продовжити - застосувати тему, потім відредагувати дані, щоб створити власну тему, а потім продублювати таблиці.

 

вибір теми

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

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

 

тема-alter-color

 

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

 

видалити-альтернативний колір

 

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

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

 

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

Виділення клітини

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

 

таблиця-підсвітка

 

3. Додайте підказку до комірок

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

 

add-tooltip

 

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

 

інструмент-редактор

 

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

 

підказка-наведення

 

4. Замерзання рядків і колон

Заморожування стовпців

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

 

заморозка-колонка

 

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

 

стіл-висота

 

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

 

виправлення ліній-відображення

 

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

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

 

рядок-заморожування-заголовка таблиці

 

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

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

 

заморожування рядів

 

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

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

 

сортування-фільтр

 

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

 

фільтр-сортування спливаюче вікно

 

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

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

 

варіанти сортування

 

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

 

параметри фільтра

 

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

 

filter-inside-column

 

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

 

розширений фільтр

 

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

 

основний пошук

 

6. Заповнення клітинок і радіус кордону

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

 

облямівка-бордюр

 

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

 

7. Спеціальний CSS

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

 

format-custom-css

 

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

 

custom-table-css

 

У клітинках, рядку та стовпці є координати, щоб ідентифікувати кожного та застосувати до нього спеціальний css. R - рядок, C - стовпець.

 

css-показ

 

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

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

Приховування холодів

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

 

responsive-hiding-col

 

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

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

 

адаптивна таблиця-прокрутка

 

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

 

57bb0cb0ac948

 

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

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

 

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

 

Існують варіанти налаштування відповідно до вашого попиту:

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

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

 

повторюваний заголовок-інтерфейс

 

Якщо ви використовуєте Повторюваний заголовок і ввімкнуто параметр « Фільтр»

 

filter-repeated-header

 

9. Експорт в Excel

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

 

експорт-Excel

 

10. Пагінація

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

 

pagination-wptm

 

11. Складання кордону клітинок

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

 

бордюрний стиль

 

12. Роздрукуйте таблицю на інтерфейсі

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

 

кнопка друку