HOW TO BUILD A COOL TABLE DESIGN WITH CSS3

Today I will show you how to create a very smart looking table which can be used for whatever you like on your website. In this instance I have used it as a web hosting pricing table
STEP 1: THE MARKUP

Let’s first start with the HTML. Here we have a simple table markup using the general elements: < table >, < tr >< /tr >, < td >< /td >, < thead >, < tbody >, < tfoot >. I have added classes to some of the table elements, you will see the styling in part 2 with the CSS.

We then need to input some data into the table, here I have just made up some figures for some web hosting packages.

<table class="pricingtable">
<thead>
<tr>
<th></th>
<th class="bronze" scope="col">Bronze</th>
<th class="silver" scope="col">Silver</th>
<th class="gold" scope="col">Gold</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Disk Space</th>
<td><strong>500MB</strong> Disk Space</td>
<td><strong>2GB</strong> Disk Space</td>
<td><strong>5GB</strong> Disk Space</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>5GB</td>
<td>25GB</td>
<td>50GB</td>
</tr>
<tr>
<th scope="row">MySQL DB</th>
<td>2</td>
<td>10</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Emails</th>
<td>5</td>
<td>20</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Domains</th>
<td>2</td>
<td>10</td>
<td>50</td>
</tr>
<tr>
<th scope="row">24/7 Support</th>
<td><span class="cross"></span></td>
<td><span class="cross"></span></td>
<td><span class="tick"></span></td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="cross"></span></td>
<td><span class="tick"></span></td>
<td><span class="tick"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>£ 2.99</td>
<td>£ 5.99</td>
<td>£ 9.99</td>
</tr>
</tfoot>
</table>

STEP 2: THE CSS

Now we have the CSS. In my < thead > section I have styled each header a different colour representing “Bronze, Silver, Gold” The gradients in the table are purely CSS, I have usedColorzilla: Ultimate CSS Gradient Generator to produce the CSS gradients. I would recommend using that generator when re-styling your tables gradients, unless you don’t want to use gradients at all.

I have also added border-radius to the Table Headers which give it another nice effect.

body { background: #3b3b3b;
}
table.pricingtable {
border-collapse:separate;
border-spacing: 0;
width: 100%;
}

.pricingtable thead th:empty{
background:transparent;
border:none;
}
.pricingtable thead th {
padding: 10px 10px;
text-transform: uppercase;
}
.pricingtable tbody td{
font:12px Arial, Helvetica, sans-serif;
color:#222222;
text-shadow:0 1px 1px #fff;
padding:10px;
text-align:center;
border:1px solid #3b3b3b;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.pricingtable tbody th {
font:14px Arial, Helvetica, sans-serif;
padding: 10px;
border:1px solid #3b3b3b;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.pricingtable th.bronze{
font: 16px Georgia, "Times New Roman", Times, serif;
font-weight: bolder;
color:#f2c9b9;
text-shadow:0 1px 1px #3f1200;ca866b
background: #f0b7a1; /* Old browsers */
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
border: 1px solid #1d1d1d;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius:10px 10px 0px 0px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.pricingtable th.silver{
font: 16px Georgia, "Times New Roman", Times, serif;
font-weight: bolder;
color:#fff;
text-shadow:0 1px 1px #727272;
background: #dedfe0; /* Old browsers */
background: -moz-linear-gradient(top, #dedfe0 0%, #b5b5b5 50%, #a5a5a5 52%, #d6d6d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedfe0), color-stop(50%,#b5b5b5), color-stop(52%,#a5a5a5), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedfe0 0%,#b5b5b5 50%,#a5a5a5 52%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedfe0 0%,#b5b5b5 50%,#a5a5a5 52%,#d6d6d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedfe0 0%,#b5b5b5 50%,#a5a5a5 52%,#d6d6d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #dedfe0 0%,#b5b5b5 50%,#a5a5a5 52%,#d6d6d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedfe0', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
border: 1px solid #1d1d1d;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius:10px 10px 0px 0px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.pricingtable th.gold{
font: 16px Georgia, "Times New Roman", Times, serif;
font-weight: bolder;
color:#feecbe;
text-shadow:0 1px 1px #906700;
background: #f9da89; /* Old browsers */
background: -moz-linear-gradient(top, #f9da89 0%, #f9c43b 49%, #eaa800 51%, #f9ca52 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9da89), color-stop(49%,#f9c43b), color-stop(51%,#eaa800), color-stop(100%,#f9ca52)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9da89 0%,#f9c43b 49%,#eaa800 51%,#f9ca52 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9da89 0%,#f9c43b 49%,#eaa800 51%,#f9ca52 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9da89 0%,#f9c43b 49%,#eaa800 51%,#f9ca52 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9da89 0%,#f9c43b 49%,#eaa800 51%,#f9ca52 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9da89', endColorstr='#f9ca52',GradientType=0 ); /* IE6-9 */
border: 1px solid #1d1d1d;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius:10px 10px 0px 0px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.pricingtable tfoot th{
background-color: #3b3b3b;
font:bold 16px Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
padding: 10px;
}
.pricingtable tfoot td{
background-color: #3b3b3b;
font:bold 20px Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
padding: 10px;
}
.pricingtable tbody span.tick{
position: relative;
float: left;
width: 16px;
height: 16px;
margin-left: -8px;
margin-bottom: -3px;
left: 50%;
background: url('tick.png') no-repeat center center;
}
.pricingtable tbody span.cross{
position: relative;
float: left;
width: 16px;
height: 16px;
margin-left: -8px;
margin-bottom: -3px;
left: 50%;
background: url('cross.png') no-repeat center center;
}

If you want to change the width of the table simply edit width: 100%; within thetable.pricingtable element at the top of the CSS. You can use percentages or pixels, whatever suits.

…and that is pretty much it, there isn’t much more to explain as it is purely CSS and HTML.
You can see a LIVE PREVIEW here.

If you have any problems implementing this table, then please don’t hesitate to comment below and myself or someone else will be happy to assist you!

Thank you!