WP Table Manager: оформление таблиц

1. Формат

На панели инструментов можно задать стиль ячейки, например: шрифт, размер шрифта, стиль текста, цвет фона ячейки, цвет текста, горизонтальное и вертикальное выравнивание ячейки и т. д. Эти настройки могут применяться как к одной, так и к нескольким ячейкам

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

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

2. Темы и параметры

В каждой таблице в меню «Темы» вы найдете опцию выбора темы . Просто щелкните по нужной теме, чтобы применить ее.

Альтернативные цвета

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

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

Выравнивание таблицы

Функция выравнивания таблицы позволяет выровнять блок div, содержащий всю таблицу, например, центрировать всю таблицу. Найти её можно в меню «Формат» > «Выравнивание таблицы» .

Выделение ячеек

Также доступна опция подсветки ячеек. Вы можете включить эту функцию в настройках. По умолчанию она отключена. Вы можете выбрать строку подсветки, чтобы настроить цвет и прозрачность подсветки.

3. Добавьте всплывающие подсказки к ячейкам

При щелчке правой кнопкой мыши по каждой ячейке таблицы появляется опция «Добавить всплывающую подсказку».

Вы можете задать ширину всплывающей подсказки в пикселях. Она переведет вас к всплывающей подсказке с редактором для редактирования.

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

4. Закрепление строк и столбцов

Замораживание колонки

Функция закрепления столбцов доступна в меню «Формат» > «Адаптивные параметры» . Можно закрепить до 5 столбцов. Отсчет начинается с первого столбца.

Для фиксации столбцов/строк есть дополнительная опция, позволяющая зафиксировать высоту таблицы (поскольку высота контейнера таблицы может быть бесконечной).

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

Замораживание рядов

Найти это можно в меню «Формат» > «Заголовок таблицы» . Здесь можно включить эту опцию и зафиксировать строки (до 5 строк).

Если вы хотите задать высоту таблицы, пожалуйста, вернитесь к настройкам адаптивного дизайна.

В этом случае первая строка будет зафиксирована на стороне клиента в соответствии с заданными настройками.

5. Сортировка и фильтры

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

Затем появляется всплывающее окно с параметрами сортировки и фильтрации. 

Чтобы отсортировать таблицу, просто включите сортировки на стороне клиента . Вы можете выбрать столбец для сортировки по умолчанию и направление сортировки.

Например, в этом случае выберите столбец A с ASC .

Доступны 2 варианта фильтра:

• Внутри столбца: вы можете фильтровать данные в заголовке каждого столбца. Кнопка-переключатель поможет вам отобразить или скрыть поле поиска в заголовке.

• Расширенная форма фильтрации: после выбора этой опции вы можете искать и фильтровать данные в таблице.

Основной поиск: При включении этой функции на лицевой стороне сайта появится поле поиска. Это позволит пользователям легко искать нужные данные в таблице.

6. Заполнение ячеек и радиус границы

На панели инструментов вы найдете значок границы, который помогает регулировать отступы и радиус скругления углов ячейки.

7. Пользовательский CSS

Давайте пойдем еще дальше. Если вы веб-дизайнер и владеете CSS, вы сможете добавить CSS в меню «Формат» > «Пользовательский CSS».

CSS-код подсвечивается с помощью функции зеркального отображения кода и может быть написан на LESS-коде, это тоже работает!

Ячейки, строки и столбцы имеют координаты, позволяющие идентифицировать каждую из них и применять к ней пользовательские CSS-стили. R — это строка, C — это столбец.

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

Мои таблицы адаптивны или используют прокрутку на небольших устройствах?

Скрытие столбцов

WP Table Manager управляет адаптивным дизайном с помощью инструмента приоритета, который является опцией. По умолчанию функция адаптивности отключена, что приводит к переполнению (хотя на мобильных устройствах это работает отлично). Чтобы использовать «Скрытие столбцов» , перейдите в меню «Формат» > «Параметры адаптивного дизайна».

В адаптивном режиме можно задать приоритет скрытия столбцов на мобильных устройствах. При скрытии столбцов отображается мобильное меню с флажком для принудительного отображения/скрытия столбцов.
Размер столбцов фиксируется во время редактирования таблицы. Если размер всех столбцов слишком велик для контейнера, возникнет переполнение, и вы сможете легко прокручивать страницу на мобильных устройствах.

Таблица с возможностью прокрутки (лучше подходит для небольшого количества столбцов)

Таблица со скрытым столбцом (лучше для большого количества столбцов)

Повторяющийся заголовок

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

Вам будут доступны опции для индивидуальной настройки в соответствии с вашими пожеланиями:

• Контрольная точка адаптивности (пиксели): Выберите значение контрольной точки в пикселях, чтобы определить, когда таблица будет переключаться в адаптивный режим.
• Максимальная высота (в пикселях) для адаптивного режима: При активации адаптивного режима, в зависимости от значения контрольной точки, задайте максимальную высоту, чтобы избежать слишком длинной таблицы.
• Стилизация в адаптивном режиме: Примените стили по умолчанию для этого адаптивного режима или используйте цвета таблицы.

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

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

9. Экспорт в Excel

Чтобы сохранить таблицу на компьютере, перейдите в меню «Таблица» и нажмите кнопку «Экспорт в Excel» . После экспорта в интерфейс пользователя тип файла изменится на *.xlsx.

10. Нумерация страниц

эта функция доступна в меню «Формат» > «Пагинация» . Используйте переключатель, чтобы включить эту функцию и выбрать количество строк для отображения на странице.

11. Оформление границ ячеек

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

12. Вывести таблицу на фронтенде

Иногда возникает необходимость распечатать таблицу. Для этого, чтобы отобразить кнопку «Печать» на лицевой стороне сайта, сначала перейдите в меню «Таблица» и поставьте галочку напротив кнопки «Печать».