Last updated: May 18th, 2018
Comparison and pricing tables let potential customers quickly get an overview of your paid offerings at a glance. There’s a reason why they are so popular on all types of e-commerce sites- they work (as in convert).
Lets get to it!
My Favorite CSS/ HTML Comparison and Pricing Tables
While most comparison tables use the TABLE HTML element, this one keeps things ultra clean and minimalist, by using a series of UL elements. CSS Flexbox is employed to transform them into rows that together create a responsive comparison table.
Another great products comparison table by Adrian Jacob, its stand out feature is the tabbed based interface when viewed on mobile devices. It uses jQuery to implement the tabbing feature.
The main advantage of such a template design is that it negates the need to scroll down to view all of the plans. This can potentially lead to higher exposure- and conversions- for plans further down the list on the table.
This clean CSS pricing table template uses CSS flexbox to resolve some of the most common issues with pricing tables, such as the tables not being centered properly, or the checkout buttons not being positioned at the very bottom.
This pricing table uses CSS Flexbox so the height of each table is the same, and the checkout button always aligned at the bottom of the table regardless of height.
Flat design is all the rage these days. This responsive pricing table uses the flat design language, with stylized headers to draw users’ attention to the various plans. A great template for web hosting firms for example.
I love the sleek slanted style of this pricing table, which uses DIV and UL elements to create the table rows. The bold purple scheme is an excellent choice as well.
As the title suggests, this is a CSS Bootstrap based pricing table that uses the elegant “slant” divider to add a feel of modern and cutting edge design.
Paket is a HTML list based pricing table that uses CSS media queries to define break points on when the table should collapse. I really like the blue and pink color combination used in the demo.
Joseph Victory’s Pricing Table uses blocks of DIVs to create a bold responsive pricing table that collapses one by one as the screen size gets smaller.
This otherwise standard looking pricing table uses HTML5 SVG to render cloud-like patterns that really elevate the look of the table.
Circular price tags have always been popular, and these colorful pricing tables is a great example of that. Each column consists of a header title at the top, followed by a large circular price, all encased in a colored container with clearly separate the important bits from the rest of each column.
This is a good pricing table to use if you wish to simply describe each of your plans as paragraphs, instead of the standard list of features. Each column consists of a icon at the top, the plan name at the top, and finally, a block of text describing the plan.
Icons or Images generally help attract attention better than text. To that end, Travis’ pricing table uses big images at the very top of each plan to visually capture the essence of the plan.
If you offer any kind of service or product with more than plan or variation, consider making use of comparison or pricing tables to present your offerings in a more effective manner.
Did I miss any great comparison or pricing table templates that are free and responsive? Please share them in the comments below!
Author Bio: Terry is a contributor and frugal living representative at Coupons24hrs.com, the site that gives you money saving tips, coupon codes and promotions for 1000s of online stores. Starting your shopping experience with knowledge.