How to Create Cool Table Design in CSS3

On 5 Nov, 2011 By With 7 Comments

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.

You can download the HTML zip at the bottom of this tutorial!

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

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.

1 table with no design at all How to Create Cool Table Design in CSS3

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

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.

2 table with design using css3 How to Create Cool Table Design in CSS3

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.

7 Responses to “How to Create Cool Table Design in CSS3”