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

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

Сегодня расскажу вам про создание таблиц для сайта с плагином 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 классы, которые мне нужно было доработать. Вам же, возможно, придется добавить еще какие-то классы, если захотите изменить оформление более кардинально. Но эти стили придется вам найти уже самим. Если вдруг возникнут непреодолимые сложности, то жду в комментариях. Постараюсь помочь.

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

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

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

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

Оцените статью
Добавить комментарий

  1. Юрий Бараковский

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  2. Step

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  3. Владимир

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

    Ответить
  4. Denege

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

    Ответить
  5. Владимир

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  6. Владислав

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Дмиторий

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

        Ответить
  7. Павел

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Андрей

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

        Ответить
        1. Константин Хмелев автор

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

          Ответить
          1. Александр

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

      2. РЯ

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

        Ответить
  8. Мария

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Вячеслав

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

        Ответить
        1. Константин Хмелев автор

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

          Ответить
  9. Татьяна

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Татьяна

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

        Ответить
        1. Константин Хмелев автор

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

          Ответить
  10. Александра

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
    2. Константин Хмелев автор

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

      Ответить
  11. Юрий

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  12. александр

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  13. Алекса

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  14. Андрей

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

    Ответить
    1. Константин Хмелев автор

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

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

      Ответить
  15. Max

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  16. Анастасия

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

    Ответить
    1. Константин Хмелев автор

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

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

      Ответить
      1. Анастасия

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

        Ответить
        1. Константин Хмелев автор

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

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

          Ответить
  17. Сергей

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

    Ответить
    1. Константин Хмелев автор

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

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

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

      Ответить
  18. волейбол

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

    Ответить
  19. Антон

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  20. Константин

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

    Ответить
  21. Александр

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Александр

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

        Ответить
  22. Анна

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  23. Вадим

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

    Ответить
  24. Наталия

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  25. Дмитрий

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

    Ответить
  26. Максим

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  27. Виктор

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  28. алексей

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  29. Дмитрий

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  30. Владимир

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  31. Руслан

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  32. KAte

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  33. Georgi

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  34. Евгений

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  35. Евгений

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

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  36. Андрей

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  37. Виталий

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

    Ответить
  38. Виталий

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  39. Пётр 03

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  40. Александр

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  41. Алексей

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  42. Алексей

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
      1. Сергей

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

        Ответить
  43. loed

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  44. Дмитрий

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  45. Влад

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

    Ответить
  46. Влад

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

    Ответить
  47. Николай

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  48. Николай

    Константин, не могу понять как сделать фон ячеек и фон верхней строки другим цветом. Сейчас в моём плагине автоматически стоят настройки: .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; /* Цвет шрифта */
    }

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  49. Серега

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  50. Slimchmz

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

    Ответить
  51. Андрей

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  52. Илона

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

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

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

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

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  53. Фрилансер

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

    Ответить
  54. Баир

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

    Ответить
  55. Егвений

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

    Ответить
  56. astsidia

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

    Ответить
  57. Герасим

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

    Ответить
    1. Константин Хмелев автор

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

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

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

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

      Ответить
  58. Герасим

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

    Ответить
  59. Петр

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

    Ответить
  60. Александр

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

    Ответить
  61. Pavel

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

    Ответить
  62. Дмитрий

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  63. Александр

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

    Ответить
  64. Кирилл

    Добрый день.

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  65. Инакентий

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

    Ответить
    1. Константин Хмелев автор

      wow yeah

      Ответить
  66. Светлана

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  67. Евгений

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  68. Иоан

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

    Ответить
    1. Константин Хмелев автор

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

      Ответить
  69. Роман

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

    Ответить
  70. Виталий

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

    Ответить