Pure CSS3 cool Tables effect

we'll going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class.

We have all the elements a table needs, a header, a body and a footer. In this tutorial we will use a hosting plan comparison table as example. The three following styles can be applied to this table by changing the class to table1, table2 or table3.

CSS Table 1

The first table will be in green tones with some gradients for the descriptive cells, the “th” elements. Let’s start with the general style for the table:

We use the gradient property for Firefox and for Webkit browsers (Safari and Chrome) to create a beautiful gradient with three colors. The border-radius property rounds the top left and top right border of the cells.

Now, we need to take care of that on th that is empty. With CSS3 selectors we can do some incredible things, and this is one of them: select the th that is empty. And this is how:

This property allows us to add some specific content (in this case it is an image) inside of the element. We could have also added some text here. We can say “::before” or “::after” which would insert it after the content.

And that’s all the style for the first table! Let’s take a look at the second one.

CSS Table 2

The second table will be more of the elegant type, with a black header and footer.

This table will not have any space in between the cells, so we collapse it:

The footer cells which we already defined together with the header cells, will need a different box shadow. The header box shadow points to the top and the footer one should point to the bottom. We also want to change the color of the text:

We also need to remove the box shadow that we defined for the header elements before.

With the :nth-last-child selector we can select the last cell element in our header and say that it should not have a right border, like the other ones:

.table2 thead :nth-last-child(1){
border-right:none;
}

With the :first-child selector we can address the first cell in the header, which is empty and we don’t want it to have a border. We also want to remove the border from the last td elements in our table body: