Константин Хмелев

Создание красивых таблиц для сайта с TablePress

Опубликовано: 27.03.2016
Время на чтение: 11 мин
133
1877

Привет, друзья!

Сегодня расскажу вам про создание таблиц для сайта с плагином TablePress.

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

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

Пример таблицы

Решил предоставить вам сначала яркий пример, который создается за 1-2 минуты. Таблица получилась одновременно простая и красивая. И это с учетом того, что делается все на одном дыхании. Не нужно работать ни с каким табличными тегами. Плагин сам все создает. Необходимо лишь добавить нужное количество строк и колонок, а затем заполнить каждую ячейку.

В общем, вот пример таблицы на основе данных развития сайта.

МесяцПосетители с поискаПосетители с сайтовПрямые заходыПосетители с социальных сетейПосетители с YoutubeВ общем за месяц
Октябрь 20143378600126
Ноябрь 20144437642625853
Декабрь 20148020825987562
Январь 2015151152227319552
Февраль 20153733093704191094
Март 201511401657005322042
Апрель 201518679184012412851
Май 201541827311208395422
Июнь 201537479011319515028
Июль 2015529893148815566950
Август 20156527103140139728142
Сентябрь 201581381331940398510335
Октябрь 20151024918326978010413583
Ноябрь 201512028 (+17,35%)153 (-16%)2762 (+2,41%)72 (-10%)81 (-22%)15096 (+11,13%)
Декабрь 201512996 (+8,04%)124 (+29,8%)3551 (+28,5%)102 (+42%)83 (+2,5%)16796 (+11,26%)
Январь 201612830 (-1,2%)161 (-19%)3890 (+9,5%)75 (-26,5%)60 (-27,7%)17016 (+1,3%)
Февраль 201615423 (+20,2%)211 (+31,05%)3992 (+2,6%)86 (+14,6%)100 (+66,6%)19812 (+16,4%)
Март 201617207 (+11,5%)205 (-2,8%)4743 (+18,8%)134 (+55,8%)61 (-39%<1em>)22350 (+12,8%)
МесяцПосетители с поискаПосетители с сайтовПрямые заходыПосетители с социальных сетейПосетители с YoutubeВ общем за месяц

Такую простую таблицу я сделал за 10 минут. Это с учетом того, что минут 8 мне пришлось смотреть в систему отслеживания статистики и делать выборку для каждого месяца по каждому показателю.

В остальном же пришлось только заполнить ячейки и сохранить изменения.

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

Плагин таблиц для WordPress - TablePress

Плагин абсолютно бесплатный. Скачать его можно с [urlspan]официального сайта[/urlspan].

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

Добавление новой таблицы происходит через админ-панель WordPress в новом пункте меню "TablePress".

добавление новой таблицы в tablepress

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

название и описание таблицы

Но также их можно вывести и на странице сайта, если будет нужно. Рассмотрим это далее.

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

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

заполнение таблицы

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

шорткод для вставки таблицы на сайт

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

пиктограмма для вставки таблицы

После клика по пиктограмме вам отобразится кнопка для вставки шорткода.

список всех таблиц

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

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

Настройки TablePress

Сначала рассмотрим работу с самой таблицей, а потом другие возможности плагина.

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

Достигается это в расширенном редакторе ячейки. Стоит сначала нажать на кнопку "Расширенный редактор", потом кликнуть на нужную ячейку.

расширенный редактор в tablepress

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

меню расширенного редактора

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

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

вставка ссылки и зображения в tablepress

Порядок действий такой же:

  1. Нажимаем на нужную кнопку;
  2. Выбираем нужную ячейку;
  3. Производим форматирование.

Далее можно объединять соседние ячейки, чтобы подсчитывать в них какие-то средние значения. Как правило, в таких случаях делается одна общая строка или общая колонка. Нет нужды делать разбиение на несколько ячеек. В этом случае используются функции объединения ячеек по вертикали и горизонтали.

соединение ячеек

Принцип таков. Например, нам нужно соединить 2 ячейки по горизонтали, то необходимо:

  1. Заполнить содержимое только левой из 2х ячеек;
  2. Кликнуть на кнопку "к левой" и выбрать правую ячейку, чтобы в правой появился тег #colspan#.

Тоже самое и с соединением по вертикали. Только нужно заполнить содержимое верхней ячейки, нажать на кнопку "к верхней" и выбрать нижнюю ячейку, чтобы в нее добавился тег #colspan#.

В блоке "Работа с таблицей" можно также дублировать необходимые строки с колонками, а также добавлять новые или удалять уже существующие.

добавление и удаление новых строк и колонок

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

список параетров для таблицы

  • Строка заголовка - включив этот параметр, самая первая строка будет выделяться соответствующими стилями плагина. Это требуется, чтобы указать на заглавную строку таблицы, где вписывается название колонок;
  • Строка итога - тоже самое, только для самой последней строки. Требуется, когда в последней строке идет подсчет итоговых результатов или средних значений. Но также можно и просто делать последнюю строку главной, дублируя в ней все те же названия колонок. Смотрите на мой пример, в котором я так и сделал;
  • Чередующийся цвет строк - я рекомендую включать, чтобы таблица не казалось скучной на простом белом или каком-то другом фоне. При включенном параметре будет чередоваться фон строк;
  • Менять цвет строки под курсором - чтобы таблица казалась более динамичной, можно включить данный параметр и, когда мы будем наводить курсор мыши на строчки, то они будут немного менять цвет фона. Также очень интересное и правильное решение;
  • Показывать название таблицы пользователю - при включенном параметре будет отображаться ее название, которое мы задавали в самом начале в процессе ее добавления. Название будет выводиться сверху или снизу (в зависимости от выбранного вами варианта) в заголовке второго уровня H2, что мне не очень понравилось. Поэтому данную функцию я не стал использовать;
  • Показывать описание таблицы пользователю - будет показывать описание, введенное на том же первоначальном этапе ее создания. Описание будет отображаться простым текстом сверху или снизу. Мне это тоже не понравилось, так как описание будет сливаться с текстом статьи. Но, конечно же можно доработать оформление плагина и тогда оно будет отличаться. Но я пока не стал лезть в оформление;
  • Групповые классы CSS - скажу честно, сам не разобрался для чего нужно данное поле и как им пользоваться. Не пойму на что оно влияет.

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

настройки праметров javascript

  • Использование активных функций DataTables - включает весь функционал, который работает через javascript;
  • Сортировка - позволяет производить сортировку данных в таблице вашими посетителям. На практике к главной строке будут добавляться маркеры, которыми можно производить сортировку;сортировка таблицы
  • Выборка - данный параметр должен позволить показывать в таблице только то, что выберет сам посетитель. Только то, что ему нужно. Я активировал чек-бокс и не увидел никаких изменений;
  • Разбивка таблицы на страницы - если таблица слишком большая, то целесообразно разбивать ее на список страниц, чтобы она не занимала слишком много места в контенте. Тогда под таблицей будут ссылки для перехода к следующей и предыдущей странице из списка;разбивка таблицы на страницы
  • Изменение разбивки страницы пользователем - позволяет пользователю самому решать, сколько строк будет отображаться на одной странице данных. Активировав данный параметр, появится соответствующая функция для выбора количество строк;выбор количества строк таблицы для показа на одной странице
  • Информация - отображение информации о количестве отображаемых строк в таблице и общем их количестве;информация о количестве строк в таблице
  • Горизонтальная прокрутка - понадобится, если в наличии имеется очень много колонок, которые могут не вместиться в область контента страницы. Чтобы просмотр был более легким для восприятия, стоит включить горизонтальную прокрутку;
  • Команды пользователя - можно прописать отдельные функции, чтобы пользователь мог более гибко управляться с данными в таблице. Я считаю, что в обычном использовании данные параметры применять не стоит.

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

сохранить таблицу

Теперь рассмотрим оставшиеся возможности плагина.

Опции плагина

В плагине имеются вкладки:

  • Все таблицы - список всех созданных, сами знаете чего);
  • Новая - создание новой таблицы;
  • Импорт - импорт таблицы из готового файла, например из Excel;
  • Экспорт - аналогично, только выгрузка из плагина в готовый файл на компьютер;
  • Опции - дополнительные параметры, которые сейчас и рассмотрим;
  • О плагине - описание расширения.

вкладки плагина tablepress

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

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

Если вы посмотрите на мой пример в начале статьи, то заметите, что в таблице у меня шрифт меньше, чем в контентной области сайта, и цвет другой (черный). Этого я достиг введением пользовательских CSS стилей в параметры интерфейса на вкладке "Опции"

пользовательские стили для таблиц

Теперь эти стили будут заменять стандартные стили плагина. Что-то будет просто заменяться, а что-то добавляться, так как не было прописано в стандартных стилях (например, размер и цвет шрифта, так как эти стили брались со стилей шаблона оформления, а не со стилей плагина).

Если что, то дам вам эти стили, может пригодятся.

.tablepress tbody td {
vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
}

.tablepress td,
.tablepress th {
text-align: center; /* Выравнивание текста - по центру*/
}

/* Стили для ячеек главной строки */
.tablepress tfoot th,
.tablepress thead th {
background-color: #d9edf7; /* Цвет фона главной строки*/
font-weight: 700;
vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
}

/* Стили для основных ячеек*/
.tablepress td,
.tablepress th {
padding: 8px; /* Внутренние отступы от краев ячеек*/
border: none;
background: 0 0;
float: none !important;
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
}

С помощью пользовательских стилей можно изменить абсолютно все параметры таблицы:

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

Стили, которые я дал, не захватывают весь спектр изменений. Я лишь добавил те CSS классы, которые мне нужно было доработать. Вам же, возможно, придется добавить еще какие-то классы, если захотите изменить оформление более кардинально. Но эти стили придется вам найти уже самим. Если вдруг возникнут непреодолимые сложности, то жду в комментариях. Постараюсь помочь.

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

Ну что же, ребята. Сделан еще один мануал из обширной темы про оформление и структуризацию контента. А таблицы - отличный элемент структуризации информации на сайте и не только на нем.

Будем продолжать данную серию статей. Ждите новых материалов. До встречи.

С уважением, Константин Хмелев!

Плохо
0
Интересно
13
Супер
1
Обсуждение
  • Юрий Бараковский
    Опубликовано: 01.03.2015 Ответить на сообщение

    Константин, спасибо за интересную статью и за плагин, с его помощью мне удалось создать таблицу на своём сайте.

    • Константин Хмелев
      Опубликовано: 01.03.2015 Ответить на сообщение

      Всегда пожалуйста!

  • Step
    Опубликовано: 15.04.2015 Ответить на сообщение

    Здравствуйте. Спасибо за статью. Но есть ещё вопрос. Как в одной из колонок сделать вывод рейтинга в форме 5 звездочек.

    • Константин Хмелев
      Опубликовано: 17.04.2015 Ответить на сообщение

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

  • Владимир
    Опубликовано: 26.04.2015 Ответить на сообщение

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

  • Denege
    Опубликовано: 03.05.2015 Ответить на сообщение

    Спасибо, стили очень пригодились. Планирую обновить дизайн, на новом будут Ваши стили.

  • Владимир
    Опубликовано: 07.07.2015 Ответить на сообщение

    Добрый день, скажите пожалуйста, а можно ли в ячейку таблицы добавить содержимое другой ячейки, которая находится в другой таблице?

    • Константин Хмелев
      Опубликовано: 07.07.2015 Ответить на сообщение

      Здравствуйте. В чем проблема просто скопировать содержимое из одной таблицы в другую?

  • Владислав
    Опубликовано: 15.07.2015 Ответить на сообщение

    Добрый день, я кажется понял суть вопроса Владимира "А можно ли в ячейку таблицы добавить содержимое другой ячейки, которая находится в другой таблице? " И хотел спросить о том же. Мы имеем ввиду, можно ли сделать сводную таблицу, что бы она создавалась из нескольких. Например для того, что бы в личном кабинете user мог писать только в свою таблицу, а затем общая таблица по всем userам выводилась на другой странице?

    • Константин Хмелев
      Опубликовано: 15.07.2015 Ответить на сообщение

      Здравствуйте. Если речь о таких таблицах, то плагин этого сделать не может. А возможно и может) Но я не скажу как. Только что посмотрел и подобных функций у плагина нет.

      • Дмиторий
        Опубликовано: 07.02.2016 Ответить на сообщение

        Есть такая возможность, и она очень полезная!!!!!!! Для этого надо установить http://tablepress.org/extensions/table-cell-shortcode/

  • Павел
    Опубликовано: 15.07.2015 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 16.07.2015 Ответить на сообщение

      Добрый. Каждой таблице присваивается свой id, который вы можете прописать в стили и присвоить индивидуальное оформление каждому ID, т.е. каждой таблице.

      • Андрей
        Опубликовано: 20.10.2015 Ответить на сообщение

        а как это сделать?

        • Константин Хмелев
          Опубликовано: 22.10.2015 Ответить на сообщение

          Например, в таблице, предоставленной в этой статье, прописан ИД "tablepress-2". Если необходимо задать оформление конкретно этой таблице, тогда мы добавляем этот ИД в файл стилей и прописываем стили. В общем, если совсем просто, то в статье я давал стили оформления своих таблиц в этом плагине. В данных стилях вместо .tablepress необходимо подставлять ИД конкретной таблицы (например, таблицы с ИД 2 - "tablepress-2") и к каждой таблице прописывать новый код стилей в файл.

          • Александр
            Опубликовано: 12.02.2017 Ответить на сообщение

            Спасибо за вашу работу. Сам новичок, немного поправлю вас: нужно вставлять вместо .tablepress (для всех таблиц) .tablepress-id-2 (2 - id таблицы для которой будут писаться стиль). Так как вы предлагаете tablepress-2 не работает. Для новичка эта информация введет в заблуждение, профи конечно поймет.

      • РЯ
        Опубликовано: 14.12.2017 Ответить на сообщение

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

  • Мария
    Опубликовано: 28.10.2015 Ответить на сообщение

    Константин, добрый день! Не могу понять, откуда у вас взят последний скриншот, размер шрифта, семейство и тд. Не могу найти этого у себя в плагине. спасибо

    • Константин Хмелев
      Опубликовано: 28.10.2015 Ответить на сообщение

      Здравствуйте. Данный пункт настроек находится точно в том же меню, как и показано на скриншоте. В админ-панели пункт "tablepress - опции"

      • Вячеслав
        Опубликовано: 06.11.2015 Ответить на сообщение

        Подскажите пожалуйста как редактировать плагин через редактор(где его найти)

        • Константин Хмелев
          Опубликовано: 06.11.2015 Ответить на сообщение

          Здравствуйте. Плагин через редактор редактируется, как и все остальные плагины. Плагины - редактор - tablepress.

  • Татьяна
    Опубликовано: 18.11.2015 Ответить на сообщение

    Спасибо за статью!
    А можно выделить объединять ячейки одной строки?

    • Константин Хмелев
      Опубликовано: 19.11.2015 Ответить на сообщение

      Не понял, о чем речь...

      • Татьяна
        Опубликовано: 20.11.2015 Ответить на сообщение

        Здравствуйте, Константин.
        Речь о том, как объединить все ячейки одной строки в одну и поместить текст по середине новой ячейки. (Нужно организовать подразделы)

        • Константин Хмелев
          Опубликовано: 20.11.2015 Ответить на сообщение

          Здравствуйте. Так, а в чем собственно проблема? В статье я описывал, как объединять ячейки строк и колонок. Читайте внимательно. Текст по центру также делается очень просто. Просто выделите нужный текст тегами центрирования. < center >тут текст< / center > Пробелы в тегах нужно убрать.

  • Александра
    Опубликовано: 02.12.2015 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 02.12.2015 Ответить на сообщение

      Нет. Таблицу адаптивной вы можете сделать сами. Тоже самое касается и вставки обычной таблицы тегами. Размер ее будет уменьшаться в зависимости от размера экрана, но до определенного момента. Когда разрешение станет минимальным, таблицы просто обрежется, как и в плагине.

    • Константин Хмелев
      Опубликовано: 04.02.2016 Ответить на сообщение

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

  • Юрий
    Опубликовано: 13.12.2015 Ответить на сообщение

    Вечер добрый. Подскажите как сделать таблицу tablepress адаптивной

    • Константин Хмелев
      Опубликовано: 04.02.2016 Ответить на сообщение

      Здравствуйте. Как таковой адаптивности у таблиц нет, т.к. если колонок много, то как не крути они не вместятся на маленьких экранах. Для этого имеется функция прокрутки таблицы по горизонтали, что достаточно неплохой вариант. Достаточно крутить ползунок и таблица будет просматриваться полностью Для этого параметрах конкретной таблицы активируйте эту опцию в самом низу настроек таблицы "Включить горизонтальную прокрутку, чтобы облегчить просмотр широких таблиц"

  • александр
    Опубликовано: 18.12.2015 Ответить на сообщение

    Константин, возможно ли разным ячейкам таблицы (или в одной строке, или столбце, или просто разным ячейкам) сделать организованно переход на одну ссылку? что бы не прописывать отдельно эту ссылку для каждой ячейки?

    • Константин Хмелев
      Опубликовано: 18.12.2015 Ответить на сообщение

      К сожалению, такого нет) Каждую ячейку назначаем ручками...

  • Алекса
    Опубликовано: 04.01.2016 Ответить на сообщение

    Подскажите, пожалуйста, как уменьшить таблицу, сделать строки более компактными (изменить размер между строками в таблице) и как поменять цвет верхней строки таблицы с светло-голубого на какой-либо другой? Где это нужно прописывать и как именно прописывать? Спасибо, новичок совсем пока(

    • Константин Хмелев
      Опубликовано: 07.01.2016 Ответить на сообщение

      Здравствуйте. Читайте внимательно стать. Я отдельно описал и даже дал кусок стилей оформления, где сделал комментарии к тем строкам, которые меняют оформление таблицы.

  • Андрей
    Опубликовано: 08.01.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 08.01.2016 Ответить на сообщение

      У каждой страницы имеется свой идентификатор. Ранее я уже отвечал на подобный комментарий. Дублирую его здесь.

      Например, в таблице, предоставленной в этой статье, прописан ИД "tablepress-2". Если необходимо задать оформление конкретно этой таблице, тогда мы добавляем этот ИД в файл стилей и прописываем стили. В общем, если совсем просто, то в статье я давал стили оформления своих таблиц в этом плагине. В данных стилях вместо .tablepress необходимо подставлять ИД конкретной таблицы (например, таблицы с ИД 2 - "tablepress-2") и к каждой таблице прописывать новый код стилей в файл.

  • Max
    Опубликовано: 15.01.2016 Ответить на сообщение

    Здравствуйте, подскажите "чайнику", а то при установке плагин идет на английском. Переводчик Loco не видит языковых файлов под него. Как сменить язык на русский?

    • Константин Хмелев
      Опубликовано: 15.01.2016 Ответить на сообщение

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

  • Анастасия
    Опубликовано: 03.02.2016 Ответить на сообщение

    Здравствуйте! Возможно ли изменить цвет ячейки шапки таблицы при наведении на нее курсора? Стандартно при наведении подсвечивает синим, а нужно, например, зеленым, вот таким #C0DA5B. Спасибо!

    • Константин Хмелев
      Опубликовано: 04.02.2016 Ответить на сообщение

      Здравствуйте. Конечно можете. Пропишите стили в настройках плагина:

      .tablepress .sorting:hover, .tablepress .sorting_asc, .tablepress .sorting_desc {
      background-color: #C0DA5B;
      }

      • Анастасия
        Опубликовано: 05.02.2016 Ответить на сообщение

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

        • Константин Хмелев
          Опубликовано: 07.02.2016 Ответить на сообщение

          Все так же очень просто. Внутри тех же стилей впишите color:#fff

          Вместо #fff впишите код своего цвета при наведении.

  • Сергей
    Опубликовано: 18.02.2016 Ответить на сообщение

    Добрый день! Подскажите, как изменить фон всех ячеек, а не только верхнего ряда? И ещё, как уменьшить размер таблицы? (при помощи кода)

    • Константин Хмелев
      Опубликовано: 15.04.2016 Ответить на сообщение

      Здравствуйте. Пропишите в свой файл стилей следующий код:

      .tablepress td, .tablepress th {
      background: #111 !important;
      }

      где #111 - код цвета фона, который вы хотите получить.

  • волейбол
    Опубликовано: 11.03.2016 Ответить на сообщение

    Для моего сайта такой плагин просто уникален, ведь очень-очень много таблиц! А вручную все написать -очень долго и нудно!

  • Антон
    Опубликовано: 29.03.2016 Ответить на сообщение

    Добрый вечер, Константин! Может быть вы знаете.. Слетает сортировка таблиц постоянно. Сайт на WP, самое коварство в том, что когда ты залогинен в админке все работает, если вышел, то все, сортировки нет. Не подскажите в чем может быть дело?

    • Константин Хмелев
      Опубликовано: 10.04.2016 Ответить на сообщение

      Здравствуйте. Точно не скажу, т.к. функцией сортировки особо не пользоваться, но скажу следующее. Насколько я знаю, то сортировка работает конкретно в данный момент времени. Т.е. вам нужно сейчас отсортировать показатели, вы это и сделали. Как только страница обновилась, то таблица возвращается в исходное состояние и это правильно, т.к. тогда таблица каждый раз была бы разной для новых посетителей из-за постоянства ее сортировки.

  • Константин
    Опубликовано: 31.03.2016 Ответить на сообщение

    Отличный разбор плагина, Константин! У меня есть статья: http://infodio.ru/tablica-dlya-sajta.html, - это обзор возможностей создания таблиц для сайта. В том числе там упоминаю про плагины. Можете в комментариях добавить ссылку на свою статью с кратким описанием. Думаю и нашим читателям будет полезна ваша статья.

  • Александр
    Опубликовано: 20.04.2016 Ответить на сообщение

    Константин, подскажите пожалуйста, с помощью TablePress можно сделать в таблице строки, с разным количеством ячеек? К примеру в первой строке будет одна ячейка, а во второй - 4 ячейки

    • Константин Хмелев
      Опубликовано: 20.04.2016 Ответить на сообщение

      Да, Можно. Это решается с помощью объединения ячеек. В первой строке просто объедините все ячейки и получится одна большая строка.

      • Александр
        Опубликовано: 20.04.2016 Ответить на сообщение

        Нашёл, спасибо большое!

  • Анна
    Опубликовано: 27.04.2016 Ответить на сообщение

    Спасибо за четкий разбор!
    Вопросы такие - можно ли поменять цвет верхней ячейки и шрифт на более яркие?
    Можно ли сделать границы ячеек (все границы) видимыми?

    • Константин Хмелев
      Опубликовано: 24.07.2016 Ответить на сообщение

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

  • Вадим
    Опубликовано: 14.05.2016 Ответить на сообщение

    Подскажите, как сделать что бы выравнивание определенных столбов было "по центру", а других "по левому краю"

  • Наталия
    Опубликовано: 15.07.2016 Ответить на сообщение

    Спасибо Вам большое за полезную и нужную информацию. Пол-дела благодаря Вам сделано и таблица готова,но с заполнением возникли проблемы. Подскажите пожалуйста как Вы добавляете её на сайт, а затем заполняете? У меня в статье показан только шорт код, а таблица отсутствует. И не заполнить никак. Если нажать "просмотр" то там она конечно есть - но в том другом окне уже невозможно заполнить...

    • Константин Хмелев
      Опубликовано: 24.07.2016 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 21.07.2016 Ответить на сообщение

    Хотел вот узнать как включить или отключить раскрытие таблицы по "+"

  • Максим
    Опубликовано: 05.08.2016 Ответить на сообщение

    Привет! Константин а как убрать надпись "Изменить" под таблицей ?

    • Константин Хмелев
      Опубликовано: 07.09.2016 Ответить на сообщение

      Привет. Надпись ИЗМЕНИТЬ показывает только вам, как администратору сайта. Посетителям она видна не будет. Можете ее убрать, поправив верстку плагина - нужно лезть в код.

  • Виктор
    Опубликовано: 12.09.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 13.09.2016 Ответить на сообщение

      Не знаю ничего подобного...

  • алексей
    Опубликовано: 18.09.2016 Ответить на сообщение

    Спасибо за статью!
    Установил плагин, но пока не нашел - есть ли возможность уже с сайта дополнять таблицу скажем простым пользователям (не заходя в админку)?

    • Константин Хмелев
      Опубликовано: 18.09.2016 Ответить на сообщение

      Такой возможности нет.

  • Дмитрий
    Опубликовано: 22.09.2016 Ответить на сообщение

    Константин. Вопрос в следующем:
    таблицы можно "схлопывать", тогда появляется "+"
    Как включить такую опцию?

    • Константин Хмелев
      Опубликовано: 22.09.2016 Ответить на сообщение

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

  • Владимир
    Опубликовано: 22.09.2016 Ответить на сообщение

    Здравствуйте а не подскажите есть ли какая-то возможность сделать таблицы этого плагина адаптивными. На данный момент на мобильных устройствах (в мобильной версии) таблицы просто обрезаются.

    • Константин Хмелев
      Опубликовано: 24.09.2016 Ответить на сообщение

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

  • Руслан
    Опубликовано: 28.09.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 28.09.2016 Ответить на сообщение

      Здравствуйте. Не подскажу, без понятия, как это сделать.

  • KAte
    Опубликовано: 17.11.2016 Ответить на сообщение

    А индексируется содержимое таблиц нормально? Или это только для пользователя, но не поисковика?

    • Константин Хмелев
      Опубликовано: 18.11.2016 Ответить на сообщение

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

  • Georgi
    Опубликовано: 20.11.2016 Ответить на сообщение

    Добрый день, Константин! Подскажите пожалуйста как в CSS пользователя прописать другое семейство шрифтов. Спасибо.

    • Константин Хмелев
      Опубликовано: 03.12.2016 Ответить на сообщение

      font-family: название шрифта; например, font-family: Roboto

  • Евгений
    Опубликовано: 25.11.2016 Ответить на сообщение

    А можно сделать чтобы показывало сеткой таблицу?

    • Константин Хмелев
      Опубликовано: 03.12.2016 Ответить на сообщение

      Можно. Нужно править стили шаблона или дописывать их, либо в файл стилей шаблона, либо в настройки плагины в пользовательские стили.

  • Евгений
    Опубликовано: 01.12.2016 Ответить на сообщение

    Добрый день Константин.

    Прошу у Вас уточнения почему может не включаться горизонтальная полоса
    прокрутки?
    Т.е. в настройках галочка включается-> сохранение идет-> а в результате прокутка не появляется.
    Если не трудно ответьте пожалуйста как прописать в дополнитьельных CSS настройках ширину ячейки.
    Благодарю.

    • Константин Хмелев
      Опубликовано: 06.01.2017 Ответить на сообщение

      Возможно, конфликт со скриптами или со стилями. Точно сказать не могу, нужно разбираться.

  • Андрей
    Опубликовано: 03.12.2016 Ответить на сообщение

    Скажите пожалуйста как добавить класс к определенной строке например где это прописать?

    • Константин Хмелев
      Опубликовано: 06.01.2017 Ответить на сообщение

      Не знаю, как такое сделать.

  • Виталий
    Опубликовано: 06.01.2017 Ответить на сообщение

    Плохо, что нельзя столбцы одной строки объеденить. Очень плохо, а так плагин хорош.

  • Виталий
    Опубликовано: 06.01.2017 Ответить на сообщение

    Вот для примера так нельзя сделать http://s014.radikal.ru/i328/1701/95/9d61f5d42ea7.png

    • Константин Хмелев
      Опубликовано: 06.01.2017 Ответить на сообщение

      Как это нельзя?) все можно

  • Пётр 03
    Опубликовано: 24.01.2017 Ответить на сообщение

    Здравствуйте!
    Где Пример таблицы у вас не отображаются вертикальные линии, а на следующих скринах они отображаются.
    Вопрос: как сделать чтобы отображались вертикальные линии таблицы?

    • Константин Хмелев
      Опубликовано: 27.01.2017 Ответить на сообщение

      Здравствуйте. Все дело в стилях. Нужно править стили.

  • Александр
    Опубликовано: 09.02.2017 Ответить на сообщение

    Константин добрый день. Спасибо за подробную статью. Подскажите как сделать чтобы в 1 столбце текст выравнивался по левому краю, а во 2м столбце по правому краю.
    Заранее спасибо за ответ.

    • Константин Хмелев
      Опубликовано: 12.02.2017 Ответить на сообщение

      Здравствуйте. На такие вопросы я не смогу ответить, т.е. это технические моменты. Скажу лишь, что нужно править стили. Если не знаете как, советую обратиться на фриланс.

  • Алексей
    Опубликовано: 22.02.2017 Ответить на сообщение

    Здравствуйте, а что шрифт и размер шрифта не меняется?

    • Константин Хмелев
      Опубликовано: 23.02.2017 Ответить на сообщение

      Все меняется через стили

  • Алексей
    Опубликовано: 22.02.2017 Ответить на сообщение

    И Ссылка не ставиться. Не рабочий плагин.

    • Константин Хмелев
      Опубликовано: 23.02.2017 Ответить на сообщение

      Все работает.

      • Сергей
        Опубликовано: 29.10.2017 Ответить на сообщение

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

  • loed
    Опубликовано: 27.02.2017 Ответить на сообщение

    В шаблоне стоит таблица, при уменьшении разрешения экрана появляются подписи в ячейках preview product и тд. Как от них избавиться?

    • Константин Хмелев
      Опубликовано: 28.02.2017 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 27.02.2017 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 28.02.2017 Ответить на сообщение

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

  • Влад
    Опубликовано: 20.03.2017 Ответить на сообщение

    Как прописать код, что бы менять цвет всех границ?

  • Влад
    Опубликовано: 20.03.2017 Ответить на сообщение

    Какой использовать код, что бы прописать цвет всех границ?

  • Николай
    Опубликовано: 20.04.2017 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 21.04.2017 Ответить на сообщение

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

  • Николай
    Опубликовано: 21.04.2017 Ответить на сообщение

    Константин, не могу понять как сделать фон ячеек и фон верхней строки другим цветом. Сейчас в моём плагине автоматически стоят настройки: .entry table {
    border: 1px solid #DFDFDF;
    background-color: #F9F9F9;
    width: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif;
    color: #333;
    border-collapse: separate;
    border-spacing: 0;
    }

    .entry table td,
    .entry table th {
    border-top: 1px solid white;
    border-bottom: 1px solid #DFDFDF;
    color: #555;
    }

    .entry table th {
    text-shadow: 0 1px 0 #fff;
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-weight: normal;
    padding: 7px 7px 8px;
    text-align: left;
    line-height: 1.3em;
    font-size: 13px;
    }

    .entry table td {
    font-size: 13px;
    padding: 4px 7px 4px;
    vertical-align: top;
    }

    Я так понял, их нужно все удалить и на их место вставить ваши коды: tablepress tbody td {
    vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
    }

    .tablepress td,
    .tablepress th {
    text-align: center; /* Выравнивание текста - по центру*/
    }

    /* Стили для ячеек главной строки */
    .tablepress tfoot th,
    .tablepress thead th {
    background-color: #d9edf7; /* Цвет фона главной строки*/
    font-weight: 700;
    vertical-align: middle; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
    font-size: 11px; /* Размер шрифта*/
    color: #111111; /* Цвет шрифта */
    }

    /* Стили для основных ячеек*/
    .tablepress td,
    .tablepress th {
    padding: 8px; /* Внутренние отступы от краев ячеек*/
    border: none;
    background: 0 0;
    float: none !important;
    font-size: 11px; /* Размер шрифта*/
    color: #111111; /* Цвет шрифта */
    }

    Я правильно понял? Просто я выбираю часть вашего кода, добавляю к своим и ничего не получается!

    • Константин Хмелев
      Опубликовано: 23.04.2017 Ответить на сообщение

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

  • Серега
    Опубликовано: 15.05.2017 Ответить на сообщение

    Здравствуйте. а можно ли сделать таблицу с помощью этого плагина адаптивной???

    • Константин Хмелев
      Опубликовано: 17.05.2017 Ответить на сообщение

      Можно сделать прокрутку таблице горизонтальную.

  • Slimchmz
    Опубликовано: 04.07.2017 Ответить на сообщение

    Огонь! С пользовательскими CSS, спасибо что все разжевал и по полкам разложил. Сэкономил кучу времени всем нам. Удачи в делах!

  • Андрей
    Опубликовано: 25.07.2017 Ответить на сообщение

    Подскажите можно ли убрать сортировку с определенних столбцов, к примеру по 2 столбцам из 5 она не нужна

    • Константин Хмелев
      Опубликовано: 21.08.2017 Ответить на сообщение

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

  • Илона
    Опубликовано: 31.07.2017 Ответить на сообщение

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

    .tablepress .column-1 {
    width: 5%;
    }

    .tablepress .column-2 {
    width: 70%;
    }

    .tablepress .column-3 {
    width: 20%;
    }

    .tablepress .column-4 {
    width: 5%;
    }

    • Константин Хмелев
      Опубликовано: 22.09.2017 Ответить на сообщение

      Попробуй приписать в конце правило !important

  • Фрилансер
    Опубликовано: 11.09.2017 Ответить на сообщение

    Здравствуйте! Подскажите, можно ли при горизонтальной прокрутке первый столбец зафиксировать, чтобы он оставался на месте а начиная со второго столбца скролилось? Заранее благодарю

  • Баир
    Опубликовано: 24.10.2017 Ответить на сообщение

    Здравствуйте! А как поменять цвет только определенных ячеек?

  • Егвений
    Опубликовано: 13.01.2018 Ответить на сообщение

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

  • astsidia
    Опубликовано: 28.08.2018 Ответить на сообщение

    Добрый день! Огромное спасибо, очень пригодилось. Некоторые вещи поменяла под себя

  • Герасим
    Опубликовано: 29.08.2018 Ответить на сообщение

    Добрый день Константин, такие вопросы уже были и ответа конкретного не последовало, интересует как раскрасить определенную строку, подсветить ее другим цветом, как в стилях задать номер строки и столбца ведь исходного кода самой таблицы как бы нет в этом плагине, иначе можно было бы назначить класс скажем row3 и ему присвоить стиль background-color: lightgreen; заранее благодарен.

    • Константин Хмелев
      Опубликовано: 29.08.2018 Ответить на сообщение

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

      У каждой строки есть присвоение ее номера. Это можно посмотреть через исходный код страницы. Если говорить об этом плагине, то это row-2, row-3 и так далее. Номер присваивается и каждому столбцу.

      Ровно также, как у каждой таблицы есть свой идентификатор, 2, 3 и т.д.

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

  • Герасим
    Опубликовано: 30.08.2018 Ответить на сообщение

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

  • Петр
    Опубликовано: 22.09.2018 Ответить на сообщение

    Спасибо за код стилей! Очень пригодился!

  • Александр
    Опубликовано: 13.10.2018 Ответить на сообщение

    Полезная статья! Спасибо!

  • Pavel
    Опубликовано: 20.03.2019 Ответить на сообщение

    Да, то что нужно, именно описание стилей и искал, чтобы было можно нормально выводить данные, спасибо!

  • Дмитрий
    Опубликовано: 30.08.2019 Ответить на сообщение

    Добрый день, а как изменить направление текста, как в ворде - повернуть на 90 грудусов.

    • Константин Хмелев
      Опубликовано: 23.09.2019 Ответить на сообщение

      Посмотрите в гугле или яндексе css стили для переворота текста по вертикали или горизонтали. И пропишите их у нужной таблице.

  • Александр
    Опубликовано: 18.11.2019 Ответить на сообщение

    Спасибо. Очень полезная информация, делаю большую таблицу на своем сайте. Надеюсь, получится...

  • Кирилл
    Опубликовано: 14.01.2020 Ответить на сообщение

    Добрый день.

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

    • Константин Хмелев
      Опубликовано: 14.01.2020 Ответить на сообщение

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

  • Инакентий
    Опубликовано: 09.05.2020 Ответить на сообщение

    Этож каким ослом нужно быть, что бы выравнивание текста не реализовать!

    • Константин Хмелев
      Опубликовано: 11.05.2020 Ответить на сообщение

      wow yeah

  • Светлана
    Опубликовано: 20.05.2020 Ответить на сообщение

    Добрый день!
    Я вставила ваш код в поле в разделе "Опции", галочка включена. Изменения сохранила. И ничего не сработало. Таблицы выглядят как и раньше. Можете подсказать, что не так?
    http://prntscr.com/sk4wxl

    • Константин Хмелев
      Опубликовано: 21.05.2020 Ответить на сообщение

      Добрый день. Не видя ваш сайт, а конкретно - страницу, где размещена таблицу, ответить нормально не смогу. Можете отправить мне данные на почту kostyakhmelov@gmail.com, подскажу.

  • Евгений
    Опубликовано: 01.06.2020 Ответить на сообщение

    Добрый вечер,Константин! Подскажите пожалуйста, как можно сделать общим фоном таблицы изображение, так чтобы оно распространялось на всю таблицу, а не на отдельные графы? Заранее благодарю!

    • Константин Хмелев
      Опубликовано: 16.06.2020 Ответить на сообщение

      Здравствуйте. Нужно тегу Table в стилях пописать фон, которым будет картинка. Более точно не скажу, так как все индивидуально для каждого сайта.

  • Иоан
    Опубликовано: 10.06.2020 Ответить на сообщение

    Здравствуйте! Подскажите, можно ли при горизонтальной прокрутке первый столбец зафиксировать, чтобы он оставался на месте а начиная со второго столбца скролилось? Заранее благодарю

    • Константин Хмелев
      Опубликовано: 11.06.2020 Ответить на сообщение

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

  • Роман
    Опубликовано: 12.06.2020 Ответить на сообщение

    Добрый день! Отличный плагин! Подскажите, как заменить слово "Поиск" в поисковике таблицы на другое слово?

  • Виталий
    Опубликовано: 28.08.2020 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.