We see everyday pricing tables on many different websites fr e.g. basic pricing or free plan, advanced or pro or medium pricing and premium or business pricing. Generally those tables contain 3 columns pricing but some of them contain 2, 4 or even 5 columns pricing based on their user needs.

I am going to discuss about 3 columns pricing tables using CSS and you can easily make it to 2 to 5 pricing tables from that code. So, let's start with the HTML as usual.

/* HTML body*/ <h2 style="text-align:center">Todoist Pricing</h2> <div class="allColumns"> <ul class="singleColumn"> <li class="header">Free</li> <li class="backgrnd">$0</li> <li>Up to 80 Projects</li> <li>Up to 5 people per project</li> <li class="backgrnd"><a href="#" class="signUp">Sign Up</a></li> </ul> </div> <div class="allColumns"> <ul class="singleColumn"> <li class="header" style="background-color:#CC0000">Premium</li> <li class="backgrnd">$3 per month billed annually</li> <li>Up to 300 projects</li> <li>Up to 25 people per project</li> <li>Reminders</li> <li>Comments & file uploads</li> <li>Labels & filters</li> <li>Productivity trends</li> <li class="backgrnd"><a href="#" class="signUp" style="background-color:#CC0000">Sign Up</a></li> </ul> </div> <div class="allColumns"> <ul class="singleColumn"> <li class="header" style="background-color:#990033">Business</li> <li class="backgrnd">$5 per month billed annually</li> <li>Up to 500 projects</li> <li>Up to 50 people per project</li> <li>Team inbox</li> <li>Admin & member roles</li> <li>Team billing</li> <li>Priority support</li> <li class="backgrnd"><a href="#" class="signUp" style="background-color:#990033">Sign Up</a></li> </ul> </div>

In the HTML code above, I have 3 columns and all of them are in 3 different containers element div with class=allColumns. I am going to set equal width in CSS for all of them.

Inside that container, I have added unordered list and added a class=singleColumn which will give different style to it. After that I have different list items but with unique classes so that each list items will have their own styles. At the end I've added Sign Up link as well but I haven't specified any link in href for this example.

All of the code is same for all 3 columns except the background-color of header and buttons as I wanted to show users different colors for different plans.

I want the whole table to look like the image at the top of this page.

Let's add CSS style to make the pricing table like the image above at the top.


  /* CSS */

  body{
    color:red;
  }
  
  .allColumns {
    float: left;
    width: 33.3%;
    padding: 8px;
  }

  .singleColumn {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }

  .singleColumn:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  }

  .header {
    background-color: #FF3300;
    color: white;
    font-size: 25px;
  }

  li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }

  .backgrnd {
    background-color: #eee;
    font-size: 20px;
  }

  .signUp {
    background-color: #FF3300;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
  }

  @media only screen and (max-width: 600px) {
    .allColumns {
      width: 100%;
    }
  }

In the CSS code above, there are some basic CSS properties I have used. I am keeping body color as red to matach it with Todoist theme and Logo color. Now, as I have discussed in the HTML code above, I am keeping same width for all 3 columns which is styled in the class=allColumns. We need float left as we need the fist plan, which is basic to be shown left then gradually increases the plans. padding for space between those columns and as you can see width is 33.3% making it equal for all columns.

Next, I am styling single column class. Now this class we have assigned into a list elements so we need to get rid of those dots in unordered lists. For that we need list-style-type value set as none. Then there is a border which you can choose whether to add or not. The properties margin and padding will make it look really organised but you can choose not to use that as well. The next one is transition which I am using for hover event on those columns. I am setting box-shadow property on mouse hover event and adding a smooth transition to it. Again, it's optional.

Next, I want other list items, their headers, buttons and links in different background-color and different styles as well. So, I have set up those different styles using different classes. It's not mandatory.

Lastly, I have added media rule to set each columns width as 100% when the screen gets smaller fort e.g. any mobile device screens wil less then 600px.

Checkout the DEMO

5 Comments

Eric Jones

Mar 14, 2020 05:03:36 am

Hey, this is Eric and I ran across yogeshchauhan.com a few minutes ago. Looks great…

Eric Jones

Mar 13, 2020 08:03:23 am

Cool website! My name’s Eric, and I just found your site - yogeshchauhan.com - while surfing the net. You showed up at the top of the search results, so I checked you out. Looks like what you’re doing is pretty cool.

Chris

Mar 11, 2020 04:03:01 pm

it was helpful

Kumail

Mar 09, 2020 03:03:13 am

Do you have a spam issue on this website; I also am a blogger, and I was curious about your situation; many of us have created some nice practices and we are looking to trade strategies with other folks, be sure to shoot me an e-mail if interested.

praj

Dec 10, 2019 01:12:41 am

thank you for the quick solution...

Leave a reply

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