Create CSS Responsive Pricing Tables Design For Website

Share:

Tutorial : Create CSS Responsive Pricing Tables Design For Website. Having previously written about how to create rowspan – colspan of basic html table and create a basic html table is enhanced with css code. In this post we will create a responsive pricing table design for website. What is special in this tutorial, we will not use basic html table like <table>, <tr>, <td>, and various other attributes of the table but using div, ul, li and supported by css code, so every html tags can be strung into a beautiful table design and responsive. You want to know how to do it ? Follow the tutorial below …
Create CSS Responsive Pricing Tables Design For Website Create CSS Responsive Pricing Tables Design For Website

Download Now Create CSS Responsive Pricing Tables Design For Website

Create CSS Responsive Pricing Tables Design For Website

Create HTML Table for Responsive Pricing Tables Design

First, we arrange the tables framework consisting of a table header and table body. Header table made ​​from div tags whereas body table made ​​of li tag. This is design of html table to responsive pricing table :

        <div class="item-pricing-table">
          <div class="head-pricing-table"> <span class="arrow-pricing-table"></span>
            <h1></h1>
            <h2></h2>
            <h5></h5>
          </div>
          <ul>
	    <li></li>
            <li class="color"></li>
            <li></li>
            <li class="color"></li>
            <li></li>
			<li class="color"></li>
            <li></li>
          </ul>
          <a href="" class="button"></a>
      </div>

Create CSS Table for Responsive Pricing Tables Design

Once the html table design for pricing table had finished, next is inserting css code mainly on li tag that looks like a table row. To make li tag look like a table row, we insert the CSS code and set the none border style for tag li. Overall, css code for li pricing table is :

.item-pricing-table ul li{
	list-style: none;
	border-top: 1px solid #ddd;
	text-align: center;
    padding-top: 10px;
	padding-botom:10px;
	margin-right:40px;
}

Next is to create zebra stripes on a table row with give background color on color class li tag. This is the css code:

.item-pricing-table .color{
	background-color: #f5f4f4;
}

Here I used the color # f5f4f4, you can change the color according to what you want
More, the CSS Responsive Pricing Table you can see in the code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Create CSS Responsive Pricing Tables Design For Website | Tutorial.World.Edu </title>
<style>
body{
	font-size: 14px;	
	font-family: 'Open Sans', sans-serif;
	line-height:24px;
	color:#555;
	font-weight:normal;	
	background:#f0f0f0 url("http://3.bp.blogspot.com/-2QQJJZk1JcU/Ud4oWRXdfwI/AAAAAAAAA2I/vKfUJkc614Y/s1600/Create+CSS+Responsive+Pricing+Tables+Design+For+Website+backg+Tutorial+World+Edu.png");
}
.container{
margin-left:100px;
margin-right:50px;	
}
a{
	color: #333;
	text-decoration:none;
	color:#fff;
}
a:hover{
	text-decoration: none;	
	color: #333;
}
h1 {
	font-size:24px;
	font-weight: 600;
	line-height: 30px;
	padding: 5px 0 15px 0;	
	margin: 0;	
	color: #555;
	font-family: 'OpenSansBold', Arial, sans-serif;
}

.title{
	width: 100%;
	border-bottom: 1px solid #df562c;
	margin: 0 0 50px 0;
	padding: 0;
	text-align: center;
}
.title span {
	display: inline-block;
	background-color: #df562c;
	border-radius: 4px 4px 0 0;
	color: #fff;
	padding: 5px 20px;
	text-align: left;
	margin: 0;
}
.item-pricing-table{
	float:left;
	width: 260px;
    margin-left:20px;
	border-radius: 4px;
	border: solid 3px #df562c;		
	background-color: #fff;
	padding-bottom: 30px;
	margin-bottom: 30px;
	text-align: center;
	padding-left:0px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.item-pricing-table:hover{
	margin-top: -5px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.head-pricing-table{
	margin-bottom:10px;
	color: #fff;	
	background-color: #df562c;
	position: relative;	
	z-index: 9999;
	text-align: center;
}
.head-pricing-table h1{
	color: #fff;
	margin:0;
	padding: 10px 0;	
	border-bottom: 1px solid #fff;
}
.head-pricing-table h2.table1{
	color: #555;	
	font-size: 30px;
	margin: 0;
	padding: 10px 0 0 0;
}
.head-pricing-table h2.table2{
	color: green;	
	font-size: 30px;
	margin: 0;
	padding: 10px 0 0 0;
}
.head-pricing-table h2.table3{
	color: #115d7f;	
	font-size: 30px;
	margin: 0;
	padding: 10px 0 0 0;
}
.head-pricing-table h2.table4{
	color: #B45F04;	
	font-size: 30px;
	margin: 0;
	padding: 10px 0 0 0;
}
.head-pricing-table h2 span{
	font-size: 14px;
}
.head-pricing-table h5{
	margin:0;
	padding: 0;
    color: #fff;	
	padding-bottom: 10px;
}
.arrow-pricing-table{
	position: absolute;
	z-index: -1;
	background: url("http://4.bp.blogspot.com/-1ZXpL6bZeXM/Ud4odLTGPPI/AAAAAAAAA2Q/y8riEewFHxc/s1600/Create+CSS+Responsive+Pricing+Tables+Design+For+Website+arrow+Tutorial+World+Edu.png") no-repeat center;
	bottom: -45px;	
	height: 67px;
	width: 45%;
	left: 0;
	margin-left:27.5%;
	
}
.item-pricing-table:hover{
		margin-top: 0;
	}
.item-pricing-table .color{
	background-color: #f5f4f4;
}
.item-pricing-table ul{
	margin-top:60px;
}
.item-pricing-table ul li{
	list-style: none;
	border-top: 1px solid #ddd;
	text-align: center;
    padding-top: 10px;
	padding-botom:10px;
	margin-right:40px;
}
.item-pricing-table .button{
	background-color:#df562c;	
	padding: 10px 35px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.item-pricing-table .button:hover{	
	background-color: #df562c;
	color: #fff;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
</style>
</head>
<body>
<!-- Content Pricing Tables-->
  <!-- CSS Responsive Pricing Table Container -->
  <div class="container">    
    <!-- Title -->
    <h1 class="title"> <span> <a href="http://tutorial.world.edu/website-design/create-css-responsive-pricing-tables-design-website/">Create CSS Responsive Pricing Tables Design</a> | <a href="http://tutorial.world.edu">Tutorial.World.Edu</a> </span> </h1>
    <!-- End Title -->    
      <!-- Item CSS Responsive Pricing Table -->
        <div class="item-pricing-table">
          <div class="head-pricing-table"> <span class="arrow-pricing-table"></span>
            <h1 style="background-color:#555;">Basic</h1>
            <h2 class="table1">$1.0<span>/Mo</span></h2>
            <h5>Or  $10.00 Yearly!</h5>
          </div>
          <ul>
		    <li style="background-color:#555; color:white;"><b>1 Addon Domain</b></li>
            <li class="color">10 GB Disk Space</li>
            <li>100GB Bandwidth</li>
            <li class="color">5 Databases</li>
            <li>5 FTP Accounts</li>
			<li class="color">1 POP3 Accounts</li>
            <li>10 Email Accounts</li>
			<li class="color">R1 Soft Backup</li>
			<li>Postgresql Support</li>
            <li></li>
          </ul>
          <a href="" class="button">Order Now</a>
      </div>
      <!-- End Item CSS Responsive Pricing Table --> 
      
      <!-- Item CSS Responsive Pricing Table -->
		  <div class="item-pricing-table">
          <div class="head-pricing-table"> <span class="arrow-pricing-table"></span>
            <h1 style="background-color:#1d6209;">BABY</h1>
            <h2 class="table2">$3.00<span>/Mo</span></h2>
            <h5>Or  $30.00 Yearly!</h5>
          </div>
         <ul>
		    <li style="background-color:#1d6209; color:white;"><b>10 Addon Domains</b></li>
            <li class="color">30 GB Disk Space</li>
            <li>300GB Bandwidth</li>
            <li class="color">10 Databases</li>
            <li>10 FTP Accounts</li>
			<li class="color">3 POP3 Accounts</li>
            <li>20 Email Accounts</li>
			<li class="color">R1 Soft Backup</li>
			 <li>Postgresql Support</li>
			 <li></li>
		 </ul>
          <a href="" class="button">Order Now</a>
        </div>
      <!-- End Item CSS Responsive Pricing Table --> 
      
      <!-- Item CSS Responsive Pricing Table -->
        <div class="item-pricing-table">
          <div class="head-pricing-table"> <span class="arrow-pricing-table"></span>
            <h1 style="background-color:#115d7f;">BUSINESS</h1>
            <h2 class="table3">$5.00<span>/Mo</span></h2>
            <h5>Or  $50.00 Yearly!</h5>
          </div>
          <ul>
		    <li style="background-color:#115d7f; color:white;"><b>50 Addon Domains</b></li>
            <li class="color">50 GB Disk Space</li>
            <li>500 Bandwidth</li>
            <li class="color">50 Databases</li>
            <li>50 FTP Accounts</li>
			<li class="color">50 POP3 Accounts</li>
            <li>50 Email Accounts</li>
			<li class="color">R1 Soft Backup</li>
			  <li>Postgresql Support</li>
			  <li></li>
		  </ul>
          <a href="" class="button">Order Now</a>
        </div>
      <!-- End Item CSS Responsive Pricing Table --> 
      
      <!-- Item CSS Responsive Pricing Table -->
        <div class="item-pricing-table">
          <div class="head-pricing-table"> <span class="arrow-pricing-table"></span>
            <h1 style="background-color:#cf8d13;">Premium</h1>
           <h2 class="table4">$10.00<span>/Mo</span></h2>
            <h5>Or  $100.00 Yearly!</h5>
          </div>
          <ul>
		    <li style="background-color:#cf8d13; color:white;"><b>Unlimited Addon Domain</b></li>
            <li class="color">1 TB Disk Space</li>
            <li>Unlimited Bandwidth</li>
            <li class="color">Unlimited Databases</li>
            <li>Unlimited FTP Accounts</li>
			<li class="color">Unlimited POP3 Accounts</li>
            <li>Unlimited Email Accounts</li>
			<li class="color">R1 Soft Backup</li>
			 <li>Postgresql Support</li>
			 <li></li>
		 </ul>
		  <a href="" class="button">Order Now</a>
        </div>
      <!-- End Item CSS Responsive Pricing Table -->      
    </div>
  <!-- End CSS Responsive Pricing Table Container -->
</body>
</html>

If you save it to a notepad, the results will be visible in the browser screen as follows:
Create CSS Responsive Pricing Tables Design For Website Create CSS Responsive Pricing Tables Design For WebsiteHope you like the design of the pricing table above. Now, you can install this responsive pricing table into your website. Good luck …
Thanks for reading Tutorial : Create CSS Responsive Pricing Tables Design For Website

[Tutorial.World.Edu]

4 thoughts on “Create CSS Responsive Pricing Tables Design For Website

Leave a Reply

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