Member Panel

How to build a cool table design with CSS3
July 5th, 2012 - 3 Comments »

 

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.

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 used Colorzilla: 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.

If you want to change the width of the table simply edit width: 100%; within the table.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.

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!

Related posts:

 

 

3 Responses

  1. Saqib Atiq says:

    Awesome tutorial, I found a very interesting fact in there. Thanks to you!!!

  2. Monserrate says:

    Does your site have a contact page? I’m having a tough time locating it but, I’d like to send you an e-mail.
    I’ve got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.

Leave a Reply