TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs).
The tables in the sections Spielplan and Spieler (right below “Baseball-Team”) and in the sidebar are managed with TablePress. Note that those tables have a different styling, applied by adding “Custom CSS” code, and that they use some custom features that are not directly part of TablePress. No HTML knowledge is required. TablePress provides a user-friendly interface allows you to easily manage and edit table data. Keep in mind that tables should only be used for displaying tabular data and never used for page layout. Using tables for design purposes causes the responsive nature of the page to break, and hurts user accessibility. WpDataTables is a premium WordPress table plugin that simplifies the process of.
The plugin does a great job and the creator Tobias Bäthge 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 (powerful marketing tool).
But the thing is that the plugin default styling looks old-fashioned and not very appealing to the eye of the modern user.
Here is a preview of our test table with the default styling and options: [toc]
What will probably grab your attention is the poor alignment of the text and elements, the unnecessary sorting and search options and some other minor details, that we’ll want to get rid of.
Center the alignment of all elements
You can see how the text is aligned in the top left corner of the cell.
Even if we centre it, it’d still be at the top which looks bad. Instead, we’ll set it to be centred in the middle of the cell, no matter of the height of the row.
Like this
To do that add this line of CSS to your Custom CSS (you can use this free plugin):
Remove the unnecessary TablePress options
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.
Here is what we left checked:
Alternating Row Colors and Row Hover Highlighting looks good only if your product images are transparent! If you use transparent background images you can leave those options enabled.
Changing the header and footer colour
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:
Adding visual elements
Visuals work better than plain text and when it comes to conversion rates, the numbers increase significantly.
TablePress works perfectly with shortcodes. Add your favourite button shortcode for your CTAs. Download some icons to display pros and cons, “yes and no” etc.
You can even add lists of benefits or specifications, get creative.
Making TablePress Responsive
By default, TablePress tales will shrink to some degree, but on smaller screens most of the tables will look cluttered.
You can see how the columns are overlapping on the example below.
Download the responsive add-on for TablePress- Click Here
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:
[table id=1 /]
to something like
[table id=1 responsive=collapse responsive_breakpoint=device /]
For “responsive” you can choose from: flip, scroll, or collapse and for the “responsive_breakpoint” from what type of device the table will become responsive – phone, tablet, desktop, or all.
Tablepress Responsive
Upload and activate the plugin and let’s check again our table.
I choose the following setup:
Tablepress Responsive Tables Wordpress Plugin
[table id=1 responsive=scroll responsive_breakpoint=tablet/]
Tablepress Responsive Mobile
And here is the final look of our refreshed and styled TablePress table