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:

Photocamera Features Editor's score Go to site

Sony Alpha NEX-F3

  • Cheapest ILC suited for shooting video
  • It's a nice little consumer-oriented camera
  • The biggest drawback is that it's interlaced at 1080/60i
  • You have to drop down to 24p for the highest-quality
  • The NEX-3N replaces the F3 at a cheaper price
Button

Canon EOS Rebel T3i

  • Cheapest dSLR for shooting video without autofocus
  • the T3i offers the high video quality
  • Ability to use hacked firmware
  • short of time code support
  • clean HDMI output
Button

Panasonic Lumix DMC-GH2

  • For the video geek on a budget who wants autofocus
  • The Micro Four Thirds
  • firmware hacks available
  • Panasonic added in a lot of the capabilities provided by the hacks
  • it also raised the price to about $1,300 for the body only
Button

Canon EOS Rebel T4i

  • least-expensive dSLR with decent video autofocus
  • 18-55mm version of its contrast-autofocus-supporting STM lenses
  • EF-S compatible lenses for manual focus
  • touch-screen operation
Button

Canon EOS 5D Mark III

  • overall best dSLR for video
  • widely priced at about $3,300
  • time code support and better audio control
  • third-party firmware hack
  • focus peaking and a few other features
Button

Niveauvolle Akademiker finden Partner auf Augenhöhe

  • A well-designed camera that's enjoyable to shoot
  • built-in GPS for geotagging
  • very good 1080/60p video
  • odd limitations for raw and video shooting
Button

Row style with scroll on mobiles

LG g3 Sony Xperia Z1 Nokia Lumia
User Reviews
Os Android (4.4.2) Android (4.4.2) Windows Phone 8.1
Processor Adreno 330 Adreno 330 Adreno 330
Batery capacity 3000mAh 2420mAh 3000mAh
CPU speed (GHz) 2.5GHz 2.2GHz 2.2GHz
DISPLAY
Screen size 5.5" 5.0" 5.0"
Display type IPS LCD TFT AMOLED
Touch screen
Features Light sensor, Proximity sensor, Oleophobic coating Light sensor, Proximity sensor, Scratch-resistant glass Light sensor, Proximity sensor, Scratch-resistant glass
CAMERA
Camera (Mpx) 13Mpx 20Mpx 13Mpx
LED flash
Video quality 2160 1080 2160p@30fps, 1080p@30fps
Second camera
Where to buy
Buy Now! Buy Now! Buy Now!

How plugin works

Check video how plugin works

You can download plugin from wordpress repository

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

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.

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.

If you need width for another column

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

This is code for styling second column

How to reduce font size

By default table will have font size the same as your content in theme. You can reduce it

How to change fonts in table

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

How to change green border of selected row

Change #77B21D to your own color

How to change green border of selected column

 

Add responsive comparison table to wordpress
3.7 (73.89%) 36 votes

Want to get unique wordpress tips?

We won't rent or sell or spam your email. We promise!

Leave a Reply

105 Comments on "Add responsive comparison table to wordpress"

Notify of
avatar
Sort by:   newest | oldest | most voted
Rene
Guest

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.

Glen
Guest

How do we disable the gray lines that are used to compare lines?

Scott
Guest

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?

Mitch Bartlett
Guest

Nice job! Great plugin.

I would probably send you a nice donation if it was capable of letting the visitor add or remove columns.

rahul
Guest

Very well done sir, this seems to be a finest table plugin for price comparison site. Thanks a lot 🙂

Scott
Guest

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/

Chirag
Guest

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!

Chirag
Guest

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?

Chirag
Guest

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.

Han
Guest

Hello! Are you guys still updating this wonderful plugin? I’ve tested it and I simply love. Just what I’m looking for!

Jim
Guest

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!

John
Guest

Thanks for helpful article, I always looking way to make a responsive comparison table and found this post. What is the theme Wpsoul using ?

Sam
Guest

Is there a way to change the width of the cells to remove extra space?

Rene
Guest

Why Have custom CSS removed 🙁 ?

Ali
Guest

Does it support RTL languages ” I mean Arabic ” ?

Jasmin
Guest

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

James
Guest

How to change background color of the table or just one column? Thank you.

Jan
Guest

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?

Jasmin
Guest

Hi @WPSOULADMIN,

find link here http://dow.innotag-internetagentur.de/2007-2/

I would like the hover effect to totally disappear.

Thank you

Kristina Toto
Guest

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:

dan
Guest

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.

Kristina Toto
Guest

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!

Yaiza
Guest

Hello,
As I can delete thead??
Thanks.

Jon Peck
Guest

Do you have a list of custom code.
How can I make table border thicker, diff color maybe, remove top colored row, etc.?
Thanks

Carlos
Guest

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

chris
Guest

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?

Spiky
Guest

How do I merge columns or rows?

Kevin
Guest

Hi,
Somehow my table header is not in the middle and the center of box.

Please check it for me.
Thanks

Kevin
Guest

nvm, I found my solution ^^!

Anton
Guest

How to change the color of the yellow boarder, where you have the cameras listed? What code is it?

Anton
Guest

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?

Saran
Guest

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?

Liz Ziser
Guest

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!

Petros
Guest

Am having issues seeing special rows on the front end. Any tips on how to fix this?

Jim
Guest

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 😀

Fabricio
Guest

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!

Lee
Guest

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}

Britney Muller
Guest

How can you add links within a cell?

Ale
Guest

Great work!
may you apply shortcode also on th?
Thanks

Vanny
Guest

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”.

Laura Dempsey
Guest

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!

marco
Guest

can u say how i can change the text “editor’s choice” in the Icon?

Shukri
Guest

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?

Karan Sanjay Tupe
Guest

My bullets are not coming in an aligned manner ,what should i do?

Andre
Guest

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

Jual Clodi
Guest

What’s different between this plugin with other plugins such as Tablepress?

Karmakshetra
Guest

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!!

Johan
Guest

Can you also use a filtering panel in combination with this table?

Raphael
Guest

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!

ANC
Guest

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

delta
Guest

it beats lot of table plug-ins. It would be great if you update it and offer premium options as well.

wpDiscuz