The pricing page is a staple for any online shop. It’s used for SaaS products, service companies, and eCommerce shops all around the web.
And no pricing page can be complete without a pricing table comparing options, features, and(naturally) prices. But designing your own from scratch can be a hassle.
That’s where these open source pricing tables can help. These are all fully responsive, and they work great as templates whether you’re looking to customize your own or just reuse existing code to save time.
1. Icon Table
Great visuals always sell. These might be product photos or custom illustrations but visuals grab attention faster than text.
This iconified pricing table by Travis Williamson is an excellent example of what’s possible with visual table columns. By adding icons, you can inform customers what they’re getting with each package before they even read anything.
In this case, the icons showcase varying power and features. The smallest plan has a paper airplane while the largest plan uses a full rocket ship. Talk about contrast!
2. Zebra Striping w/ Colors
Here’s a much simpler pricing table that follows more conventional norms. It’s a sample table in Spanish created by Agustin Ortiz showing off his dev skills.
It uses zebra striping, large pricing headers, and varying colors to help one specific pricing format stand out from the rest.
The colors can feel a little strong, so it’s not perfect for every layout. But you can easily change up the colors and still keep the same format to get this working on your own site.
3. Dark Purple Table
For a darker and richer table design check out this purple pricing table created by Mike Torosian.
It uses background gradients along with border hover effects to create one of the most professional pricing tables on the web. It’s also fully responsive, so the table elements break down into rows as the browser gets smaller.
Gorgeous buttons, brilliant gradients, and crisp typography all help this table stand out from the rest.
4. Professional Pricing
B2B websites often look for more professional designs that edge away from creative color schemes & extraneous icons. This pricing design is one such example following a typical color scheme of dark & light shades.
One pricing column uses a dark blue highlight to jump out from the rest of the table. It’s standard practice to follow this technique since it can lead to higher conversions.
That’s why the “professional” plan also uses a drop shadow to appear on top of the other columns. But when resized down smaller it falls into a stack formation for easier browsing.
5. Table w/ Hover Effect
Custom hover effects lookin ballin’ and breathe life into any pricing table. This works especially well for entertainment-style pricing tables or sites that use a lot of animated effects.
In this pricing table design you’ll find some gorgeous hover effects that add color into the darkened table headers. They each leave room for a background image of your choice, and the hover effect is controlled through CSS.
One other thing I like is the click event tied to the entire table column. This way if a visitor clicks anywhere on the column it’ll bring them to the relevant signup page.
6. Bootstrap Pricing Tables
I’m a huge fan of Bootstrap since there’s so much you can do with the framework and its related themes. One such example is this BS pricing table created by Sahar Ali Raza.
A lot of this design is custom coded including the slanted header backgrounds and the hover animations.
But the overall layout relies on Bootstrap which makes it fully responsive by default.
The typography is stunning, and I also adore the hover animations while moving over each feature item row. A clean table design that could work for almost any website.
7. Material Design Pricing
If you like Google’s material design styles then you’ll definitely like this pricing table created by Renan Pupin. It’s a material UI table following many of Google’s suggested features like drop shadow hovers and flat color schemes.
Best of all the whole thing is fully responsive and runs on pure CSS code.
It even includes a small “recommended” ribbon in the top corner which you can alter to fit your needs.
8. Clean & Simple
Super clean and lightweight best describes this white pricing table created by Daniel Hearn.
It doesn’t rely on many colors or fancy features to stand out. Instead, it uses gray for the headers and black/white for the text contrast. This actually works well since the CTA buttons keep a strong green outline effect.
When you reduce color in a table you draw attention to the only areas with color, and this usually encourages more clicks with more traffic. Since this runs on pure CSS, you’ll have an easy time updating the button color to suit your design.
9. WIP Tables
For a work in progress I have to say this colorful pricing table set looks incredible.
Developer Dylan Mcleod created this as a test for coding responsive tables. It follows many traditional techniques like highlighting the table headers and keeping one column larger than the others.
But I’m most impressed with the varying color choices that blend so well together. It’s almost like these tables have a few different headers, and they all grab your attention for different reasons.
10. Flexbox Pricing
Now for a real forward-facing table design check out this flexbox table.
It does have some JS code but that’s only used to show extra features in the columns, it has nothing to do with the responsive layout.
When mousing over the table each column grows a bit larger and increases the background color. This helps the column stand out from the rest and grab attention faster. It’s a nice effect that carries over to the table’s CSS transitions while resizing the browser.
Although the biggest feature here is the use of flexbox to format the table columns. Many devs are holding out with flexbox for larger browser support, but this example proves that flexbox can be the future of responsive websites.
- 10 CSS Code Snippets That Demonstrate Responsive Text Techniques
- 10 Pure CSS Responsive Navigation Code Snippets
- Responsive HTML Table Techniques & Examples
- 20 Responsive & Lightweight CSS Frameworks Worth Considering
- 15 Simple Responsive Navigation Solutions & Tutorials
- How to Create Responsive Off-Screen Menus with CSS3
- Quick Tip: Using CSS Transitions in Responsive Web Design
- Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks