How to Create Cool Table Design in CSS3
Today I will show you how to create cool table design using CSS3; you can use these tables for data handling and data presentation. Using the same old table code and a little of CSS3 to spice things up, we will achieve a nice looking design without noticing that we are using plain old tables.
Here is the link for the Demo.
Copy the markup below, and paste it in your favorite code editor (Dreamweaver for me) and save as index.html.
Let’s start the markup
<table border="0"> <tr> <th>Payment Number</th> <th>Client</th> <th>Date</th> <th>Total</th> </tr> <tr> <td>0524/0156643435891</td> <td>ACME Company</td> <td>10/18/2011</td> <td>$320.00</td> </tr> <tr> <td>0524/45645853011</td> <td>ACME Company</td> <td>10/18/2011</td> <td>$320.00</td> </tr> <tr> <td>0524/0343432453423211</td> <td>ACME Company</td> <td>10/18/2011</td> <td>$320.00</td> </tr> </table>
As you can see I just put dummy data on the table, the main focus of this tutorial is the design. Below is the output of our table on a browser without a design.
Now we have all the elements a table needs, a header, body and footer. For this tutorial we will use the table as data storage. As you can see we don’t have any designs at all, we will do that in a second.
For the sake of the tutorial we will use an inline CSS (not recommended for production sites), inside the <head> tag put this <style> and copy the CSS code below and paste inside style, make sure you close the style tag</style>.
CSS3 Design
table{
width:100%;
border:5px solid #386977;
border-collapse: collapse;
border-spacing: 0;
}
tr, td{
font-size:14px;
color:#222222;
text-shadow:0 1px 1px #fff;
padding:5px;
text-align:center;
border-bottom:1px solid #D3DDE2;
border-right:1px dashed #D3DDE2;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top, #feffff 0%, #e6f1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e6f1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* IE10+ */
background: linear-gradient(top, #feffff 0%,#e6f1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e6f1f7',GradientType=0 ); /* IE6-9 */
}
th{
color:#097799;
text-shadow:0 1px 1px #fff;
font:bold 16px Arial, Helvetica, sans-serif;
padding:10px 15px;
background:#090;
border-bottom:1px solid #0591BC;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
Here is the output of our table, using gradient and padding the table looks nice and clean. Now our table is ready for data handling and presentation.
Honestly, there is nothing to explain here, because it’s plain CSS and for the gradient I’ve used Colorzilla Gradient Generator and paste it in th and tr, td. If you’re a developer this is so useful when handling and presenting data; after all clients love a cool GUI nowadays.
Here is the link for the Demo.
If you have designed a table using CSS3 for data handling, feel free to post your link below I would love to see your end result.
If you like the article, you can subscribe to our RSS
That really is an awesome tutorial for a CSS3 and HTML5 beginner/enthusiast like me, the CSS3 codes gave a new life to the table. It looks so more fantastic with all those different colors and gradients
Thanks for the kind words Shiva, this is really helpful for dev’s out there who uses table as data holder. See you soon!
thanks sanjay sir really helpful tutorial thanks. Sir please help me to learn javascript.
Piyush,
Glad to know that my tutorials are helping you. You can find a lot of tutorials on Javascript, my niche is about Design and WordPress.
This tutorial is very use full for me i feel very happy to learn new things. today i learnt from you awesome thing Thank you very much…
Nicely done. I don’t know why so many designers steer clear of tables. You’ve shown how nice they can look, and they can be so useful for so many designs. Thank you!
Nice Tutorial Sanjay.