Awesome tables with CSS3

In one of the topics we talked about during our HTML and CSS workshops are CSS3 selectors and how powerful those can be. In this post I will demonstrate what you can do with an ordinary table to make it look amazing, just by adding some CSS and one very small image.

CSS3 selectors are not supported by all browsers. Especially IE does not support them. That is just a given and we are not in a position to change that. Instead, we will just make sure the table still looks OK when an IE user looks at it. If someone uses a current version of Firefox, Safari or Google Chrome they would see an awesome table, whereas IE users would see an ordinary table.



Basic HTML


Below is the HTML we are using for our table. It has a thead where the header rows are defined and the content of the table is defined withing the tbody tag.
I just copied a couple of rows to get some content, but the first column is treated as a row header.





















Header 1 Header 2 Header 3
Row 1XXXX
Row 2XXXX
Row 3XXXX
Row 4XXXX
Row 5XXXX
Row 6XXXX
Row 7XXXX
Row 8XXXX


I added a bit of CSS to this table to make it a nice, though ordinary, table


body { font-family:arial; font-size:14px;}
table { border-spacing: 2px; }
table th { padding:5px 7px; background-color: #9cdbf0; height:30px; }
table td { padding:5px 7px; background-color: #e3f4fa; text-align:center; }

And this is how it would look in IE from now on (and still in the other browser at this point)

Ordinary table in IE9



The CSS magic


For this awesome table I went a little crazy with the nth-child selector of CSS and that resulted in the CSS below


table thead th:nth-child(1) { background:none; }
table thead th:nth-child(2) { border-radius:10px 0 0 0; }
table thead th:nth-last-child(1) { border-radius:0 10px 0 0; }

table tbody tr th:nth-child(1) { background: #dddddd url(pointer.png) right center no-repeat; padding:0 23px 0 7px; height:40px; text-align:left; border-radius:5px 0 0 5px; min-width:100px; }
table tbody tr:nth-child(n+3) td { background-color: #d9f2fa; }
table tbody tr:nth-child(n+5) td { background-color: #cdedf7; }
table tbody tr:nth-child(n+7) td { background-color: #c4e9f5; }

In the first line I am stating that the first TH element in the THEAD (the left corner) should not have a background color. I also wanted to have nice rounded corners in the header, such that the second TH element and the last TH element should each have a rounded corner, respectively the top left and top right one.
The next lines are for styling the content of the table (TBODY). table tbody tr th:nth-child(1) Selects the first TH element of a row and would make it look like arrow, pointing to the row. For a nice gradient-like effect we added a few lines to change the background-color of the element every 2 lines.



So by adding just a little CSS magic our ordinary table now looks like this awesome table.

Awesome table in Firefox



That is some powerful stuff!!



Files


Here you can download the HTML with the example and the pointer image.
table.html
pointer.png