How To Create HTML Comparison Tables In Minutes

Comparison Tables on the web are mostly created by Bloggers and Webmaster to give a clear idea between comparing two or more products. Normally most of us uses Photoshop to create custom comparison tables, but not everyone has Photoshop. So in order to create HTML comparison tables using HTML, I have used Compare Ninja’s Comparison table generator and I thought this is the easiest way.

create comparison tables

Create HTML & CSS Comparison Tables

Creating comparison tables with Compare Ninja is just a minutes away. To get started with it, sign up for Compare Ninja (optional), select the table name, no. of items to compare, no. of categories and width. What I loved is the comparison template with which you can easily select a skin and enter the values for the respective boxes.

create comparison table

In the third step, you can not only add inputs, but also increase or decrease the no. of rows and columns. So even if you forgot to select the exact number of items and categories, you can easily create or delete from here. Finally once your done with adding inputs, you can copy the code and paste it on your blog post.

create comparison table

This is how it will looks finally.

Bloggermint Table

iPhone 4S
Galaxy Nexus
8 MP Camera
Internal Memory
NFC

This table was created with Compare Ninja.

HTML comparison table code

<h2>Bloggermint Table</h2><link rel="stylesheet" href="http://www.compareninja.com/template/skins/Sky/skin.css" type="text/css">
<div style="width: 100%;" id="tableWrapper"><table id="vsTable"><tbody><tr><td style="width: 33%;" class="cat title"></td><td style="width: 33%;" class="title"><div class="">iPhone 4S</div></td><td style="width: 33%;" class="title"><div class="">Galaxy Nexus</div></td></tr><tr class="second"><td style="width: 33%;" class="cat"><div class="">8 MP Camera</div></td><td style="width: 33%;"><div class="yes"></div></td><td style="width: 33%;"><div class="no"></div></td></tr><tr><td style="width: 33%;" class="cat"><div class="">Internal Memory</div></td><td style="width: 33%;"><div class="yes"></div></td><td style="width: 33%;"><div class="yes"></div></td></tr><tr class="second"><td style="width: 33%;" class="cat"><div class="">NFC</div></td><td style="width: 33%;"><div class="no"></div></td><td style="width: 33%;"><div class="yes"></div></td></tr></tbody></table></div>

Simple isn’t it? Compare Ninja is free. So you can create comparison table for your blog post in minutes.

December 20, 2011. This entry was posted in CSS, Tutorials and tagged , , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

8 Responses so far!

  1. This looks really professional. I will definitely try this. Thanks for sharing.

  2. This is cool people spend so much time in making a better css but if you have options like these already available you need not to worry about…

  3. Great post Franklin Manuel.. Ive had nightmares trying to make a good comparison table. Almost always i end up just putting a regular html table with border=”1″ which looks so lame and dull. Thanks a lot for sharing..

  4. great find, and thanks for sharing….you saved me 😀

  5. Great post. Thanks for sharing this info! This would definitely saves my time a lot.

  6. Thanks a lot for this post. Is there any free alternative option to compare tables? This compare ninja is really nice but it requires a premium membership if you’re going to add more than 5 columns and 10 rows

  7. Thanks a lot for this post. It saves me a lot of time. Very nice tables

  8. Thanks for the info, but how to add buy button inside the table, any idea, please share

Leave a Reply

Your email address will not be published. Required fields are marked *