Tablepress как изменить цвет

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

ПОСЛЕДНИЙ ОБЗОР ПЛАГИНОВ ТАБЛИЦ ДЛЯ WORDPRESS:

5 лучших плагинов красивых, бесплатных, адаптивных таблиц для WordPress

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

Какие плагины для создания красивых адаптивных таблиц я выбрал для себя

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

Итак, я решил, что сам буду использовать два варианта:

• TinyMCE Advanced. Это не плагин для создания таблиц, а визуальный редактор, но с его помощью легко создавать и вставлять таблички в посты. Таблички неадаптивные, поэтому его можно использовать только для создания небольших табличек с числами. Дизайн изначально симпатичный и его можно настраивать. Да и сам по себе редактор намного лучше базового визуального редактора в Вордпресс;
• TablePress. Самый популярный и часто обновляемый. Дизайн надо настраивать самому. Чтобы таблицы стали адаптивными, необходимо устанавливать дополнительный плагин Responsive Tables. Не могу сказать, что мне этот плагин очень нравится, но это лучшее решение, меньшее из зол.

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

 TablePress. Самый популярный плагин, позволяющий добавлять в Вордпресс красивые таблички, – это TablePress. У него около 3000 отличных отзывов и 500 000 активных установок. Это был самый первый плагин, который я посмотрел, и мне он сначала не понравился, так как он предлагает только один базовый дизайн, который, на мой взгляд, не является красивым. Базовый дизайн таблички видно на рисунке снизу. Кроме того, мне использование этого плагина показалось не очень удобным. Но после того как я пересмотрел много других плагинов, я понял, что этот плагин не так уж и плох по сравнению с другими и, потратив время на его освоение, вы сможете сделать то, что требуется – дизайн можно менять css-кодом, и на сайте разработчика есть подробные инструкции, как это сделать: документация, часто задаваемые вопросы. Эти документы на английском языке, читайте их при помощи переводчика Гугл.

Плагин создает неадаптивные таблички, и чтобы превратить таблички в адаптивные, надо установить дополнительный бесплатный плагин Responsive Tables, который можно скачать только по этой ссылке, на сайте wordpress.org его нет. Я сначала подумал, что он платный, но это просто автор просит перечислить ему донейшн $9, а скачать плагин можно бесплатно. После установки обоих плагинов у вас в админке в левом вертикальном меню появится ссылка TablePress, вам там нужно будет создать новую таблицу и вставить ее код вида table id=1 / в пост. Если вы хотите превратить таблицу в адаптивную, то вам надо добавить дополнительный код (выделен жирным): table id=1 responsive=scroll /. При этом режим адаптивности “scroll” можно поменять на “flip” или “collapse”, как изменится при этом адаптивная табличка, смотрите демо здесь: Responsive Tables.

Если вы хотите зафиксировать ширину столбцов, то Вам надо так поменять код таблицы: table id=1 column_widths=”40px|50px|30px|40px” responsive=scroll /. Если вам надо изменить цвет строки-заголовка, то тогда вам надо вставить следующий CSS-код в специальную форму в настройках таблицы: .tablepress thead th, .tablepress tfoot th { background-color: #ff0000; }. Вставьте вместо #ff0000 свой цвет. Вот базовый дизайн таблицы TablePress:

 Easy Table. 90 000 активных установок. 70 отличных отзывов. Таблички неадаптивные, но при уменьшении ширины браузера появляется полоса прокрутки, что, в принципе, приемлемо. Таблички создаются легко. Дизайн не супер, но в крайнем случае можно использовать, кроме того, можно самостоятельно настраивать внешний вид при помощи CSS, чем я заниматься бы не хотел, хочется брать готовые красивые таблицы. Мне не очень понравилось, что таблички надо создавать в CSV-формате, но в крайнем случае можно пользоваться и этим плагином. Вот как выглядит табличка по умолчанию (в принципе, ничего):

 wpDataTables. Бесплатная версия неадаптивна, платная версия стоит $35 (купить можно здесь: wpDatatables). По последней ссылке есть демо адаптивной таблички, так вот, когда я проверял эту демо-табличку, то адаптивность не сработала, табличка не поместилась на узком экране. Дизайн на меня впечатления не произвел, но понравилось, что можно создавать графики. На сайте wordpress.org всего 10 000 активных установок и 15 хороших отзывов. Не впечатляет, пользоваться не буду! Но позже я обнаружил, что на популярном американском сайте www.wpexplorer.com этот плагин расхвалили как плагин месяца и один из лучших для создания таблиц. Я еще раз проверил демо таблицы на адаптивность – обрезаются все столбцы при сужении экрана(. Дизайн мне не нравится. Проверял опять здесь на сайте CodeCanyon: wpDatatables. На этом сайте плагин продан около 10 000 раз и при этом имеет около 500 хороших отзывов. Может, все-таки я ошибаюсь – адаптивность работает, и таблицы очень красивые?  🙄

 Shortcodes Ultimate. 600 000 активных загрузок. Около 3500 отличных отзывов. Что очень радует, плагин создан нашим соотечественником Владимиром Анохиным. Отличный плагин, если вам требуется вставить на сайт какой-либо так называемый шорткод (владки, буквицу, красивый список, ярлык, кнопку и т.д.). С его помощью можно также вставить и табличку. Предустановленных дизайнов нет, надо настраивать дизайн самостоятельно. Таблички получаются неадаптивные. Вставлять их надо в виде HTML, что неудобно. Я не буду его использовать, так как шаблонов красивых таблиц там нет, и я не нашел, как вставить просто иконку, хотя мне это тоже нужно было. К тому же следующий плагин-редактор лучше, на мой взгляд.

 TinyMCE Advanced. Это не плагин для создания табличек, а продвинутый редактор текстов, который позволяет очень много что сделать. В дополнение ко всему можно вставлять таблички с его помощью. Мне этот инструмент создания табличек очень понравился, так как там все понятно и очевидно, я легко поменял фон и цвет границ и за 1 минуту создал красивую табличку, не покидая свой пост. Одна досада – табличка получилась неадаптивная! Мне очень жаль, так как я готов был остановить свой выбор на этом плагине. И хотя в этом редакторе можно создавать небольшие таблички, придется искать решение для создания больших табличек дальше(… Вот, как выглядит созданная мною табличка за 1 минуту:

 Data Tables Generator by Supsystic. 10 000 активных установок, около 200 хороших отзывов со средним баллом 4.9. Я прочитал хороший отзыв об этом плагине в статье How to Create Responsive Tables in WordPress That Don’t Suck. Таблицы действительно получаются адаптивными, но выглядят не очень хорошо на маленьких экранах. В плагине есть несколько режимов адаптивности: стандартный режим (столбцы идут один под другим на маленьких экранах), режим автоматического скрывания столбцов, режим горизонтальной прокрутки. Более или менее приемлемо выглядит режим горизонтальной прокрутки, остальные режимы смотрятся очень убого. Встроенных шаблонов нет, но дизайн можно настраивать самостоятельно, меняя цвет фона ячеек. В настройках можно поменять язык плагина на русский. В платной версии можно добавить построение графиков и диаграмм. В целом плагин приемлемый, можно пользоваться, но он мне не понравился, пользоваться им неприятно что ли, требуемых задач он не решает. Но тем не менее рекомендовать его к использованию можно.

Плагины, которые превращают обычные таблицы WP-сайта в адаптивные

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

 Magic Liquidizer Responsive Table. 10 000 активных установок, 30 хороших отзывов со средним баллом 4.6. Этот плагин действительно делает таблицы адаптивными, но делает это очень криво. Вместо того, чтобы расположить один столбец под другим, он из первой строки с заголовками сделал столбец и из всех других строк он сделал столбцы, и разместил их один под другим. Я думаю, что этот плагин непригоден для использования. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел.

 Automatic Responsive Tables. Мало того, что этот плагин работает так же, как и предыдущий, так у него еще всего 1000 активных установок и 5 отзывов. Обновлялся плагин больше года назад. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел. Не знаю, мне такое не подходит.

 Responsive Scrolling Tables. 1000 установок, 8 хороших отзывов, обновлялся более, чем два года назад. Плагин создает горизонтальную полосу прокрутки для таблиц с фиксированной шириной столбцов. На удивление, он сработал очень хорошо, добавил красивую полосу прокрутки. И в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший. Я сам им пользоваться не буду, т.е. мне не нравится, что он заброшенный и непопулярный, и его надо бы побольше потестировать, но тем не менее его можно рассматривать как вариант.

Список лучших адаптивных табличек с ценами (прайс-листами) для WP-сайта

Таблички с прайс-листами я не тестировал, так как они мне пока были не нужны. Однако в процессе поиска обычных адаптивных таблиц я собрал список плагинов для установки таблиц прайс-листов на сайт WordPress. В мой список попали только плагины с красивыми табличками, большим количеством активных установок и хороших отзывов. Также я старался смотреть, чтобы плагин не был заброшенным, последний раз обновлялся не так уж давно.
 Easy Pricing Tables. Хороший бесплатный плагин для создания красивых табличек с прайс-листами. Я проверил демо таблиц этого плагина, таблички адаптивные и их адаптивные версии смотрятся очень красиво. У него 30 000 активных установок и 76 очень хороших отзывов. Да и таблички на скриншотах красивые! Еще мне понравилось, что в него уже встроена возможность отслеживать как конверсию в Гугл Аналитикс нажатием кнопки в таблице, но эта опция есть только в платной версии за $59.

Вот еще плагины красивых адаптивных таблиц с ценами:

• Pricing Table by Supsystic (бесплатен, 10000 активных установок, около 100 отзывов со средним баллом 4.5);
• Responsive Pricing Table (бесплатен, 10000 активных установок, около 50 отзывов со средним баллом 4.5);
• CSS3 Responsive WordPress Compare Pricing Tables ($19, 10000 продаж, более 1100 отзывов со средним баллом 4.5);
• Pure CSS Responsive Pricing Tables for WordPress ($18, 1000 продаж, более 250 отзывов со средним баллом 4.0);
• Go Pricing – WordPress Responsive Pricing Tables ($25, 8000 продаж, более 1000 отзывов со средним баллом 4.6).

Другие решения по созданию таблиц в WordPress

• можно найти тему WordPress с уже встроенными красивыми табличками. Это самый простой вариант, но тему, чтобы она всем устраивала и в ней были хорошие таблички, надо еще поискать. Если вы знаете красивые и функциональные темы с хорошими табличками, поделитесь, пожалуйста, в комментариях;
• можно верстать таблицы вручную. Мне это решение не очень подходит, но многие авторы пишут, что это очень просто. Не спорю, это просто, но я бы хотел концентрировать свое внимание больше на создании контента для таблицы, чем на создании таблицы. Тем более когда возникают ошибки в коде, то порой очень много времени уходит на их поиск и устранение. Как верстать адаптивные таблички, написано в этих статьях на английском языке:
  • How to Create Responsive Tables in WordPress That Don’t Suck;
  • How to Create Responsive Tables in WordPress.

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

Tablepress is by far the most popular WordPress table plugin, and it’s completely free. TablePress is flexible enough to create almost any type of table, but the default CSS styles are pretty bland.

One of my pet peeves is seeing a default Tablepress table on a website, without even minor styling upgrades to match the website’s theme.

So let’s change that.

You’ll learn: Learn how to style your TablePress tables using CSS, to make them more beautiful, useful and responsive.

Where to write your CSS code for TablePress?

There are so many different places to add custom CSS on your site, which one is best? For me, there are two obvious locations to consider (plus a few other options).

1. TablePress Plugin Options (preferred)

TablePress actually has it’s own built-in solution for adding custom CSS. It’s hidden in the plugin options menu, however, so you may not have found it. One minor annoyance is the design of the text box, that doesn’t auto-size to the content while you’re adding code.

Why is this the best method? Because it only inserts the CSS code on posts where the Tablepress shortcode is executed. The styles won’t be loaded on other pages, saving you precious milliseconds of load time.

2. Other places for CSS code

There are a plenty of other ways to add CSS code to your site too. The obvious choice is the WordPress Customizer, which has an ‘additional CSS’ section.

Your theme may also have a custom CSS feature, or you can use popular CSS plugins like SimpleCSS or Custom CSS Pro.

Keep in mind: Most CSS plugins load styles on every page of your site. This is fine if you’re a few lines of code. But once you start cracking 100 lines or so, it might be worth moving to Tablepress’s built-in CSS feature.

Anatomy of a TablePress Table

To correctly apply CSS to TablePress, you’ll need at least a basic understanding of the various elements and class names you can target. And there are a bunch of ’em (which makes adding styles super easy!).

Here’s the html structure of a 3×3 TablePress table.

<table class="tablepress tablepress-id-1 custom-classnames">
<thead>
<tr class="row-1 odd">
	<th class="column-1"></th>
	<th class="column-2"></th>
	<th class="column-3"></th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
	<td class="column-1"></td>
	<td class="column-2"></td>
	<td class="column-3"></td>
</tr>
<tr class="row-3 odd">
	<td class="column-1"></td>
	<td class="column-2"></td>
	<td class="column-3"></td>
</tr>
</tbody>
</table>

Wrapper Classes

The <table> element has several classes attached.

• Tablepress – applied to all tables
• tablepress-id-xxx – Specific to ID of your table
• Custom classes – Any class names you add while creating the table.

Column & Row Classes

Tablepress adds a numbered class to each row and column, so that you can style each individually. There is also an even/odd class for alternate rows.

• Rows: row-1, row-2, row-3
• Columns: column-1, column-2, column-3
• Even/Odd (rows only): odd, even

Whole-table styles

Here are some common tweaks you can use to style the entire table, not just individual rows or columns.

Change the typography

You might want to set a different default font-size for your tables, and possibly switch to a font that is easily legible at small sizes.

The CSS

.tablepress.your-class {

    font-size: 13px;
    font-family: Arial, sans-serif;

}
Code language: CSS (css)

Center the table on a page/post

If your content area is wider than the table data, you may want to center the entire table rather than leave it left-aligned (by default).

It’s easy to do. If you’re in the old WYSIWYG editor, you can just click on ‘text’ view and put <center></center> tags on either side of the table HTML. But it’s just as easy to do with CSS.

Just set the left and right margin to ‘auto’ and it will automatically center itself.

.tablepress.your-class {

    margin-left: auto;
    margin-right: auto;

}
Code language: CSS (css)

Center text in the table cells

Here’s how to center the text inside the cells (by default they’re left-aligned). You can see the demo in the table above.

The CSS

.tablepress.your-class th, .tablepress.your-class td {

    text-align: center;

}
Code language: CSS (css)

Add borders to table cells

If you want a more spreadsheet like appearance, just add a solid border to all table cells. You can chose to include or exclude TH header cells as well.

By default, Tablepress uses the border-collapse property, so the borders will combine into a single border.

The CSS

.tablepress.your-class th, .tablepress.your-class td {

    border: 1px solid #666;

}
 /* Tip: to match Tablepress defaults, use #ddd as border color */
Code language: CSS (css)

Styling TablePress Rows & Columns

Change the background color and text color for Tablepress header row

The biggest giveaway that a site is using Tablepress is the default table header styling. Changing the background color of the header cells to match your site branding is a great way to making your tables feel custom.

The CSS

table.tablepress.your-class thead th {

    background-color: #3a6377;  /*background color */
    color: white;   /* Text Color */

}



  


                       
  



Code language: CSS (css)

Style a specific column or row

I frequently use this to change typography (bold) or add a background color to a column or row.

Here’s how to target a specific column in Tablepress:

The CSS

table.tablepress.your-class .row-3 td {

    background-color: #f9bf76;     /*background color */
    font-weight: bold;    /*bold font */
    border-top: 1px solid #333;    /*borders */
    border-bottom: 1px solid #333;

}
Code language: CSS (css)

And how to style a specific row:

The CSS

table.tablepress.your-class tbody .column-2 {

    background-color: #f9bf76;     /*background color */
    font-weight: bold;    /*bold font */
    border-left: 2px solid #333;    /*borders */
    border-right: 2px solid #333;

}
Code language: CSS (css)

Change the default row striping

Tablepress lets gives you the option make your table striped, alternating the background color for even and odd rows. By default the colors are white and light gray, but you can easily customize them.

The CSS

.tablepress.yourclass .odd td {

    background-color: #f4f4f4; 
}

.tablepress.your-class .even td {
    background-color: #c3ffe5;
}
Code language: CSS (css)

Styling a single table cell

By combining TablePress’s row and column classes, you can precisely target individual cells for granular styling. You probably won’t use this much, but it’s a handy trick for highlighting outliers in a data set.

Note, the in the table html, the column class is inside the row class. The <tr> elements have the .row class, whereas the <td> and <th> elements have the .column class.

.tablepress.your-class .row-3 .column-3 {
    background-color: gold;
    font-weight: bold;
    border: 2px solid #5b5b5b;
}



  


                       
  



Code language: CSS (css)

Pro Tip: When using one-time styles that will never be reused on another post or table, you can embed them in custom HTML block inside your post, rather than adding them to your site-wide CSS file. In fact, that’s how I added all the example CSS for this post.

It’s super easy to do. Just put your CSS between html <style> </style> tags.

<style>
    /* Your CSS Here */
</style>
Code language: HTML, XML (xml)