Add responsive comparison table to wordpress
Meet our new plugin Table Maker. You can use it for creating simple, beautiful responsive tables for anything – specification comparisons, list of top offers, etc.
You can control and fill everything that you want to each cell. You can add content row by row and column by column. This means that plugin is good for creating top lists and for comparison table charts with specification.
Plugin has many unique features. For example, you can place subheaders in tables. You can mark first row as column for specification labels. You can make each table responsive or scrolable on mobiles.
Some Unique Features:
- Responsive option (stacks)
- Predefined icons
- Rows or cols lines
- Option to mark first column for specification labels
- Option to add labels and featured row and cols
- Works with shortcodes
- Option to add subheaders
- Option to choose color of header
- Great and simple design
- Option to upload and use images
- Optional center aligning
Here, you can find some examples
List style with responsive stack view on mobiles:
[wpsm_comparison_table id=”2″ class=””]
Row style with scroll on mobiles
[wpsm_comparison_table id=”1″ class=”hover-col1 center-table-align”]
How plugin works
Tips and tricks
After several questions from users, I found that requests usually are very similar, so, I write some css tips which allows customize table. You should add these tips to custom css area of your theme. If you don’t have such area, try to search plugin Custom Css.
How to disable hover styles
.wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td {
background-color: transparent;
}
How to disable min width of cell
By default, each cell has minimal width to prevent collapsing of cells when there is no content, but sometimes this can be a problem. For example, if you want to have small width cells.
.wpsm-comptable td {
min-width: 1px !important;
}
How to make custom width of first column
By default, table fits whole width of container and divide all columns to equal width. Sometimes you need to have width of first (or another) column with definite width.
.wpsm-comptable td:first-child{width:100px !important}
If you need width for another column
.wpsm-comptable td:nth-child(2){width:100px !important}
How to style special cell or row
You can use similar code to style row or column. This is example of styling all cells of second row
.wpsm-comptable tr:nth-child(2) td{background-color:#eee}
This is code for styling second column
.wpsm-comptable td:nth-child(2){background-color:#eee}
How to reduce font size
By default table will have font size the same as your content in theme. You can reduce it
.wpsm-comptable{font-size:85%}
How to change fonts in table
.wpsm-comptable{font: 13px/18px Arial}
In this code I added font family Arial with 13px size and 18px line height.
How to add customizations for special page
WordPress adds special class to all post or page and you can use it to style table on specific page. Use code as above, but add additional class.
For posts, class will be postid-163, for pages pageid-163, where 163 is ID of page or post.
Example
.postid-163 .wpsm-comptable td:nth-child(2){background-color:#eee}
How to change green border of selected row
.wpsm-comptable .editor_selected_row td:not(.st-key):not(.st-val) {
border-bottom: 3px solid #77B21D;
border-top: 3px solid #77B21D;
}
.wpsm-comptable .editor_selected_row td:first-child {
border-left: 3px solid #77B21D;
}
.wpsm-comptable .editor_selected_row td:last-child {
border-right: 3px solid #77B21D;
}
Change #77B21D to your own color
How to change green border of selected column
.wpsm-comptable th.editor_selected_col {
background-color: #77B21D !important;
color: #fff !important;
}
.wpsm-comptable td.editor_selected_col, .wpsm-comptable th.editor_selected_col {
border-left: 3px solid #77B21D;
border-right: 3px solid #77B21D;
}
.wpsm-comptable tr:last-child td.editor_selected_col {
border-bottom: 3px solid #77B21D;
}
Hello
The plugin is perfect! I have it connected directly to my site.
Only I have a problem with the responsive design:
I am forced to the left perpendicular to write the product. When I write the table like this: http://baby-hochstuhltest.de/treppenhochstuhl-test-2015/ then this is set up incorrectly in Responsive Design.
It would be great if you could change this for both variants.
Hi Rene! You are getting responsiveness error because it seems that you are adding this table to custom website! You need to focus on responsive code for Mobile targets!
How do we disable the gray lines that are used to compare lines?
Not sure what grey lines do you mean. Can you give me screenshot?
How to disable grey lines which highlight the rows and columns?
.wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color:#fff}
Place this code in yout theme files
I tried creating some CSS for vertical-align: top; but it did not work. Is there an easy way to do this in the plugin’s admin page?
Ok. checked. Your code is very simple. Just add in your theme or at any place for custom css
.wpsm-comptable td{vertical-align: top !important}
Thanks!
Do you have live link?
Nice job! Great plugin.
I would probably send you a nice donation if it was capable of letting the visitor add or remove columns.
But this is static table plugin constructor. How users can add columns to static table? If you need dynamic comparisons of products/post’s data you need another plugin. For example, our theme Rehub has such constructor.
Very well done sir, this seems to be a finest table plugin for price comparison site. Thanks a lot 🙂
Thanks again for the great plugin. I have an image I would like to be bigger inside the table. How can I accomplish this? html sizing code does not work. http://earlydevelopment.org/
Hi. Yes, plugin has some image limitation to prevent stretching of table. You can simply deactivate it with such css code
.wpsm-comptable td img{max-width:2000px !important; max-height: 2000px !important}
Place this code in your theme or in custom css section of theme
Thank you!
Hi, thanks for the great plugin. I just installed it and so far I am enjoying it.
Just a quick question, how can I add buttons? Will I need to install any additional editor or plugin for that? Right now I am using Visual Composer and I am not getting any options at the bottom-left to add buttons like the way it shows in the “how plugin works” video.
Would be great if someone from your team can help me with this. Best!
By default, button shortcodes are visible only if you use our themes + some additional things. But plugin is shortcode friendly. You can create button with VC on draft page and copy just shortcode button, then insert in table as text. Table will generate your button
Thank you for quick reply. I will give it a try.
I have followed instructions in the tutorial to create a table, but I am having a small issue. I can’t see header row at all and lines for the far right column and bottom row are missing.
Here are the screenshots for your reference
http://prntscr.com/a01zz6
http://prntscr.com/a0202b
Any suggestion on fixing this error?
I need live link to page with table to check it
Thank you! I just you guys a live link in an email at : sizamtheme@gmail.com
Please let me know if you need me to send it to any other email address.
Hello! Are you guys still updating this wonderful plugin? I’ve tested it and I simply love. Just what I’m looking for!
Yes. There are some things in TODO which we will add. For example, sticky header for table
is there an estimated date for Sticky Header?
I think near month
Is the sticky header still on your TODO?
yes, but currently, we don’t have enough time for plugin updates, sorry
Great plugin!
Is there any code I can add to remove padding and reduce the cells/font size so the entire table is smaller? Thanks in advance!
.wpsm-comptable th, .wpsm-comptable td{padding:5px; min-width:10px !important}
Place this code in css of your theme
Thanks for helpful article, I always looking way to make a responsive comparison table and found this post. What is the theme Wpsoul using ?
It’s Rehub theme with some small header customizations
Is there a way to change the width of the cells to remove extra space?
.wpsm-comptable th, .wpsm-comptable td{min-width:1px !important}
Add to your css files of theme
Why Have custom CSS removed 🙁 ?
There is no custom css field in plugin
Does it support RTL languages ” I mean Arabic ” ?
There is no limits in table structure, so, you can set each columns as RTL.
Hi there,
bought your plugin on codecanyon and I love it.
One thing I would like to change, how can I stop the “hover-effect” on the table. So the table to stay like it is without hovering?
Please see my table at dow.innotag-internetagentur.de
Thank you very much for your help.
Regards,
Jasmin
Hi. But I don’t sell any plugins on Codecanyon. Table Maker plugin is totally free, maybe you bought something another
How to change background color of the table or just one column? Thank you.
.wpsm-comptable{background-color:#color}
For columns
.wpsm-comptable tr:nth-child(2){background-color:#color}
this is example of custom background for second row
.wpsm-comptable tr td:nth-child(2){background-color:#color}
this is exmample for custom color of second column
How can I change the size of the column itself? Changing the colour of the header doesn`t work by selecting another colour. Is there a trick, too?
provide link, I will check
Hi @WPSOULADMIN,
find link here http://dow.innotag-internetagentur.de/2007-2/
I would like the hover effect to totally disappear.
Thank you
You have correct code
.wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color: transparent !important;}
Problem is that in your theme there is no background for container and this makes row as background color which is grey
You can change to .wpsm-comptable td:hover, .wpsm-comptable td.betterhover, .wpsm-comptable tr:hover td{background-color: #fff !important; }
Hi @WPSOULADMIN,
find link here http://dow.innotag-internetagentur.de/2007-2/
I would like the hover effect to totally disappear.
Thank you
What is the max amount of rows the table maker can handle? Because it allows me to create as many rows as I want, but any info in rows after 197 as soon as I save changes they all disappear along with last to column info in row above. I am using this to create a table of all our products available, but this issue is causing me a big problem, especially since I have to upload at least 5000 products to said table.
Here is a direct link to table I am creating:
This plugin is for comparisons and for simple good looking tables. If you have more than 200 rows, it’s better to use table data plugins, like TablePress
Hey @WPSOULDADMIN,
This plugin is great, I was wondering if tehre’s any CSS I can use to make the table a little smaller or font smaller so it fits in the display on my phone. Right now it’s getting cut-off.
Updated article with tips
I also need to know if there is any short code to make table on front end to automatically sort from a to z on its own, because we will uploading new product and removing old product all the time, but want our list/table to show to viewer in alphabetical order at all times. Thanks in advance!
There is no such option. This plugin is for static simple tables. if you need sorting and other extended things it’s better to use TablePress
Hello,
As I can delete thead??
Thanks.
Do you have a list of custom code.
How can I make table border thicker, diff color maybe, remove top colored row, etc.?
Thanks
Added
Hi,
How can I just import the contents of an Excel table into a pre-designed table? How to do it for full rows/columns?
Thanks
Try to convert table in csv format in Excel and then, try to import file to new table (check bottom buttons)
Hello,
This is good, can i create tables on the fly? i mean i want the table to be updated automatically everyday,can i upload files automatically with contents to update the tables daily?
Yes, if you will use dynamic shortcodes in table. But this doesn’t depend on table plugin
How do I merge columns or rows?
There is no such option
Hi,
Somehow my table header is not in the middle and the center of box.
Please check it for me.
Thanks
But they are in center. Maybe you fixed this
nvm, I found my solution ^^!
How to change the color of the yellow boarder, where you have the cameras listed? What code is it?
you can change color of header in table settings
I can also notify you that adding customizations css for special pages in wp doesnt work…
.postid-163 .wpsm-comptable td:nth-child(2)
I replace 163 with my unique post-id. Still doesn’t change the other table I make, regardless of what I put in it:
Example:
.pageid-94 .wpsm-comptable td:first-child{width:180px !important}
.pageid-94 .wpsm-comptable td:nth-child(4){width:100px !important}
.pageid-94 .wpsm-comptable td:nth-child(6){width:200px !important}
.pageid-94 .wpsm-comptable td:nth-child(7){width:200px !important}
Whats wrong?
maybe you theme overwrite code. Send me link if you have
Is it possible to make the last added row to display first in table?
– without using “switch rows” option, is there any short code to make this possible?
no
Hi Admin, great app!
Unfortunately, I’m having trouble setting custom widths for multiple tables. I’ve inputted the following into Custom CSS:
.wpsm-comptable td:first-child{width:30% !important}
.wpsm-comptable td:nth-child(2){width:15% !important}
.wpsm-comptable td:nth-child(3){width:15% !important}
.wpsm-comptable td:nth-child(4){width:40% !important}
…which work great for one of my tables. However, I’ve created a second table that it looks awful for.
I don’t see any ID assignments above to apply different widths to different tables. Could you please advise?
I appreciate it!
You can try to add something like
.wpsm-comptable:first-child td:first-child{width:30% !important}
but I am not sure if this will work
Any updates on this? I have the same problem, where I have multiple tables that require different width. Thanks!
sorry, it’s not available. This plugin is for creating simple tables. For advanced tables – use TablePress or similar
Am having issues seeing special rows on the front end. Any tips on how to fix this?
I don’t know how to fix your issue, because no details from you
Hi is it possible to hide the column titles in the responsive view so there is only one column and not two?
I would happily pay you to help me achieve this 😀
HI, first of all wonderful job! Just would like to know if is possible to make the second row text bold and change it’s background color? I’ve tried this, but not succeed:
.wpsm-comptable tr:nth-child(2){background-color:#ff0000}
Thanks in advance!
.wpsm-comptable tr:nth-child(2) td{background-color:#ff0000}
Like many of the people posting, here, the CSS to change the column width is not working for me.
.wpsm-comptable td:first-child{width:100px !important}
.wpsm-comptable td:nth-child(2){width:100px !important}
.wpsm-comptable td:nth-child(3){width:100px !important}
.wpsm-comptable td:nth-child(4){width:100px !important}
.wpsm-comptable td:nth-child(5){width:100px !important}
.wpsm-comptable td:nth-child(6){width:100px !important}
.wpsm-comptable td:nth-child(7){width:100px !important}
give me link
How can you add links within a cell?
Add html code of link http://www.w3schools.com/TAgs/tag_a.asp
Great work!
may you apply shortcode also on th?
Thanks
I don’t think that this is possible
Really nice work.
I am asking if it is possible to change the text-content of the editors choice. Right now it says “Editors Choice”.
You can do this with Localization. Use Loco translate for this
Love this plugin! Looking to (1) remove the main title row and (2) change the color of the title row and/or the subtitle row(s)… thanks so much for your help!
can u say how i can change the text “editor’s choice” in the Icon?
Use Loco translator plugin
The css code is it for a specific table or it applies to all tables? If it’s the latter, how do I specify different column width size for different tables?
it’s for tables of plugin.
My bullets are not coming in an aligned manner ,what should i do?
Hi,
is this possibele to fixed the first column? like the comparison chart table from rehub theme?
i can give a credit to you if you van make this to work 🙂
best greetings
Andre
currently no. maybe will be added in updates.
What’s different between this plugin with other plugins such as Tablepress?
only one – it has possibility to make table as responsive
Oh my goodness! Incredible article dude! Many thanks, However I am encountering troubles with your RSS. I don’t know the reason why I can’t subscribe to it. Is there anybody else getting similar RSS problems? Anyone who knows the answer will you kindly respond? Thanks!!
Can you also use a filtering panel in combination with this table?
no, you need tablepress or similar plugins for this
Hi!
Great plugin. Many thanks for that.
I would like to have black as a background and white text.
The frame and all the lines of the table should also be black (or simply no color / transparent).
Thank you for your help!
Hi. It’s depending on your theme. I can recommend this article https://atendesigngroup.com/blog/how-determine-which-css-styling-element
Hi is there a way that i can modify the color of the header to a shade different from the ones that have been provided in the plugin? What would be the shortcode for that? And can i also change the font color in the header? Thanks
Hi. This is free plugin, we don’t provide customization for plugin for free
it beats lot of table plug-ins. It would be great if you update it and offer premium options as well.
Hey, thanks for the great plugin man, Everything is fine but I would like to know if there are any possible ways to show only specific columns on mobile devices. Example, if i have 5 columns in desktop version and want to show only 3 columns in mobile devices, is there any CSS or could you please suggest plugin?
Hi. This is free plugin, we don’t provide customization for plugin for free
Hi there – just downloaded Table Maker. Is there a user guide?
Thanks,
Gary
this article is tutorial. video is also included
Installed the latest update and all 28 tables gone! WTF :O
https://www.screencast.com/t/GtNzh9LL8UG
All of my tables now are gone after you update the plugins. It’s so frustrating!
deactivate and activate plugin
Hi, is there any way to change font colour of title (1st row) to white while the rest stays black for all tables?
You can create css customization by yourself, as it’s free plugin we don’t provide any help with customization
atendesigngroup.com/blog/how-determine-which-css-styling-element
Hi — Great plugin! Wondering if there’s a way to change the vertical alignment of text in the columns?
no, you can’t
Hi. Just discovered this cool plugin but I am having problems making it to work. I follow your video guide to create a comparison table complete with images and features but when I paste the code on my site, I get an error message asking for table ID. I am unable to figure out where to get the table ID without which the table does not render. Any help will be appreciated Here is the error I get “table maker test
January 14, 2018 by gh
Please specify the table ID”
Table ID is visible on page where you create table and when you copy shortcode
I tried adding various custom css you supplied, but nothing changes. Is it possible my theme is over-riding? Is so, how can I over-ride?
How does the image in the center of the table
try to wrap it with tags “center”
Dont really know what to say. 6 hours and still have nothing to show for it.
1- Edit changes, click save changes, table deletes new information and resorts back to old save.
2- Table constantly getting cut off on the website, even when i use your codes to change table size.
3- none of the codes work when put into css
it looks like cache plugin issues. Try to deactivate cache plugins.
https://prnt.sc/jikfn5
How to add the background grey colour which shows up as the border for the images in the first coloumn.
I have used plugin Thrive Architect with price expensite for make comparison table in my wordpress website but when I see your post i think this is amazing to make beautiful comparison table with code.
Thank you so much 🙂
Thanks a lot.
I would pay for this plugin if it offered more customization (e.g. header), I think it has a lot of potential!
Great,it works excellent on my website,please check this https://www.vpnfornewbie.com/top-10-vpns ,I’ll show you how I make it
How did you created button bro
button is from theme. Check docs of your theme, all themes has such shortcode
Highly recommended than using tablepress
Just Awesome Bro! Forget about TOC+!
What is the short code for button?
Plugin doesn’t have own shortcode of button, you can check docs of your theme for this
Hey there,
I have installed the plugin successfully, but when I create tables: the table is not been created. how can fix it?
hello I have migrated my site from digital ocean to google cloud with all in wordpress plugins. Every single piece of file is migrated except tables. The complete site is migrated same as it was before. Only tables are missing, The plugin is there on the site. But only tables are missing. I have more than 20 large tables. How do I recover my tables. https://www.coinexpansion.com
hello I have migrated my site from digital ocean to google cloud with (All In One MIGRATED plugin). Every single piece of file is migrated except tables. The complete site is migrated same as it was before. Only tables are missing, The plugin is there on the site. But only tables are missing. I have more than 20 large tables. How do I recover my tables. https://www.coinexpansion.com
Hey, Great work!
may you apply shortcode also on this?
Thanks
yes
The plugin is very perfect. This is what I’m looking for.
I tried to make a table like this but it wasted a lot of time. This help me a lot.
Thank you so much for your sharing.
Great plugin!
Can you remove the header row in both desktop and mobile view?
This only works on desktop
.wpsm-thead {display: none !important;}
Also, how to add buttons? The shortcode in the video is gone.
plugin is not supported, we will make Table maker for Gutenberg in next month
Hi
Is posible inport csv file . ant also linke icture. We nead for scoring of ouer athlets..
Thank you
it’s not for importing tables. Also, this plugin is not supported, we are working on more fresh plugin-extension for Gutenberg
Hi, Table Maker is amazing plugin. Perfect and very responsive. Thanks
I am facing a small problem with alignment.I have created 2 tables in my article.
I have put custom css based on postid.
1. One Table (center aligned) has 4 Columns and 4 Rows and i have left aligned text in the 4th row using custom css.
2. Second Table Has 3 Columns and 12 Rows (In this table i have aligned 2nd column left aligned using css)
Now, the problem is all contents in 4th row in second table are also left aligned and contents in Second column of first table are also aligned.
Can I have a custom css code based on table ID, not post ID? If can have custom css based on table id then i will change as per my requirement.
Please Advice
Check attached image for Screenshot
Currently, it’s outdated plugin. We don’t support it, but we will make Gutenberg version, it’s almost ready, we need to move only styles from theme to make it working on other themes
Hi WPSOULADMIN,
Just wondering if you have a timeframe for the release of a Gutenberg version of Table Maker? Is this going to be a standalone plugin or included only in the Rehub theme?
Table Maker is a great plugin, but without the CSV import working its hard work making large tables.
Thanks
it’s available in theme as Offer listing module. Currently we decided to make full functional Affiliate helper plugin, then release it. We don’t see reason to make just table plugin. You can find few Table maker Gutenberg plugins on WordPress, including affiliate table plugins
Hi, I have two questions.
1) Are you making a new version of this plugin for Classic Editor?
2) I know it’s an outdated version and you are not supporting it, is it still works fine with the classic editor?
Thanks
I don’t think it will work. We will make Product list module for Gutenberg
unfortunately, I can;t create a table. It doesn’t save.
plugin is not supported by our team and has another author now.
Does ths come in a Gutenberg version?
this plugin is not supported. Here is actual Comparison table plugin
it’s available in theme as Offer listing module. Currently we decided to make full functional Affiliate helper plugin, then release it.
it’s very useful post to create the responsive comparison table in wordspress. I found the complete detail here .