{"id":980,"date":"2018-09-26T19:53:04","date_gmt":"2018-09-26T16:53:04","guid":{"rendered":"https:\/\/wpctrl.com\/?p=980"},"modified":"2023-02-06T20:34:36","modified_gmt":"2023-02-06T18:34:36","slug":"tablepress-styling","status":"publish","type":"post","link":"https:\/\/wpctrl.com\/tablepress-styling\/","title":{"rendered":"TablePress Custom Styling – How to Make your Tables Sleek and Responsive"},"content":{"rendered":"\n

TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs).<\/p>\n\n\n\n

The plugin does a great job and the creator\u00a0Tobias B\u00e4thge is providing amazing support for a free plugin! It is perfect for data tables and with some work, it could also be used for comparison tables (a powerful marketing tool).<\/p>\n\n\n\n

But the thing is that the plugin’s default styling looks\u00a0old-fashioned and not very appealing to the eye of the modern user.<\/p>\n\n\n\n

Here is a preview of our test table with the default styling and options: [toc]<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

What will probably grab your attention is the poor alignment of the text and elements, the unnecessary\u00a0sorting and search options, and some other minor details, that we’ll want to get rid of.<\/p>\n\n\n\n

Center the alignment of all elements<\/h2>\n\n\n\n

You can see how the text is aligned in the top left corner of the cell.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Even if we center it, it’d still be at the top which looks bad. Instead, we’ll set it to be centered in the middle of the cell, no matter\u00a0the height of the row.<\/p>\n\n\n\n

Like this<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

To do that add this line of CSS to your Custom CSS (you can use this free plugin<\/a>):<\/p>\n\n\n\n

.tablepress thead th,\n.tablepress tbody td {\n\ttext-align: center;\n}\n\ntd.column-1, td.column-2, td.column-3, td.column-4, td.column-5 {\nvertical-align: middle !important;\n}\n<\/pre>\n\n\n\n
Remove the unnecessary TablePress options<\/h2>\n\n\n\n
When adding a new table you will see some checkboxes with options. Some of those are handy, but for our purpose, we’ll want to disable them.<\/p>\n\n\n\n
Here is what we left checked:<\/p>\n\n\n
\n
\"\"<\/a><\/figure><\/div>\n\n\n
Alternating Row Colors and Row Hover Highlighting <\/strong>looks good only if your product images are transparent! If you use transparent background images you can leave those options enabled.<\/p>\n\n\n\n
Changing the header and footer\u00a0color<\/h2>\n\n\n\n
By default, all tables have a blue header with no option to change. To do so you’ll need to add this line of CSS to your custom CSS:<\/p>\n\n\n\n
.tablepress thead th,\n.tablepress tfoot th {\n\tbackground-color: #F2A53B;\n}\n<\/pre>\n\n\n\n
Adding visual elements<\/h2>\n\n\n\n
Visuals work better than plain text and when it comes to conversion rates, the numbers increase significantly.<\/p>\n\n\n\n
TablePress works perfectly with shortcodes. Add your favorite button shortcode<\/a> for\u00a0your CTAs. Download some icons to display pros and cons, “yes and no” etc.<\/p>\n\n\n\n
You can even add lists of benefits or specifications, and get creative.<\/p>\n\n\n\n
Making TablePress Responsive<\/h2>\n\n\n\n
By default, TablePress tales will shrink to some degree, but on smaller screens, most of the tables will look\u00a0cluttered.<\/p>\n\n\n\n
You can see how the columns are overlapping in the example below.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Download the responsive add-on for TablePress- Click Here<\/a><\/p>\n\n\n\n
Read the description on the page above, because the plugin has 3 responsive modes, also you have to change the shortcode of your table from:<\/p>\n\n\n\n
[[table id=1 \/]]<\/strong><\/p>\n\n\n\n
to something like<\/p>\n\n\n\n
[[table id=1 responsive=collapse responsive_breakpoint=device \/]]<\/strong><\/p>\n\n\n\n
For “responsive” you can choose from flip, scroll, or collapse, and for the “responsive_breakpoint” from what\u00a0type of device the table will become responsive – phone, tablet, desktop, or all.<\/p>\n\n\n\n
Upload and activate the plugin and let’s check again our table.<\/p>\n\n\n\n
I choose the following setup:<\/p>\n\n\n\n
[[table id=1 responsive=scroll responsive_breakpoint=tablet\/]]<\/strong><\/p>\n\n\n\n
And here is the final look of our refreshed and styled TablePress table<\/p>\n\n\n
\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"
TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs). The plugin does a great job and the creator\u00a0Tobias B\u00e4thge is providing amazing support for a free plugin! It is perfect for data tables and with some work, it could also be used for comparison tables (a powerful marketing tool). But the […]<\/p>\n","protected":false},"author":1,"featured_media":1309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","ub_ctt_via":"","footnotes":""},"categories":[3],"tags":[],"table_tags":[],"class_list":{"0":"post-980","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-plugins"},"featured_image_src":"https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-600x400.jpg","author_info":{"display_name":"Bozh","author_link":"https:\/\/wpctrl.com\/author\/wpctrl\/"},"featured_image_src_square":"https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-600x600.jpg","uagb_featured_image_src":{"full":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"thumbnail":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-150x150.jpg",150,150,true],"medium":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-300x199.jpg",300,199,true],"medium_large":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-768x510.jpg",768,510,true],"large":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"1536x1536":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"2048x2048":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"gb-block-post-grid-landscape":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-600x600.jpg",600,600,true],"pixwell_370x250":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-370x250.jpg",370,250,true],"pixwell_370x250-2x":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-740x500.jpg",740,500,true],"pixwell_370x250-3x":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"pixwell_280x210":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-280x210.jpg",280,210,true],"pixwell_280x210-2x":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-560x420.jpg",560,420,true],"pixwell_400x450":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-400x450.jpg",400,450,true],"pixwell_400x600":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-400x600.jpg",400,600,true],"pixwell_450x0":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-450x299.jpg",450,299,true],"pixwell_780x0":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1-780x518.jpg",780,518,true],"pixwell_780x0-2x":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false],"qi_blocks_image_size_square":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",650,431,false],"qi_blocks_image_size_landscape":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",979,650,false],"qi_blocks_image_size_portrait":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",650,431,false],"qi_blocks_image_size_huge_square":["https:\/\/wpctrl.com\/wp-content\/uploads\/2018\/09\/tablepress-styling-1.jpg",990,657,false]},"uagb_author_info":{"display_name":"Bozh","author_link":"https:\/\/wpctrl.com\/author\/wpctrl\/"},"uagb_comment_info":2,"uagb_excerpt":"TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs). The plugin does a great job and the creator\u00a0Tobias B\u00e4thge is providing amazing support for a free plugin! It is perfect for data tables and with some work, it could also be used for comparison tables (a powerful marketing tool). But the…","_links":{"self":[{"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/posts\/980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/comments?post=980"}],"version-history":[{"count":0,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/posts\/980\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/media\/1309"}],"wp:attachment":[{"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/media?parent=980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/categories?post=980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/tags?post=980"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/wpctrl.com\/wp-json\/wp\/v2\/table_tags?post=980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}