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 1
X
X
X
X
        
Row 2
X
X
X
X
        
Row 3
X
X
X
X
        
Row 4
X
X
X
X
        
Row 5
X
X
X
X
        
Row 6
X
X
X
X
        
Row 7
X
X
X
X
        
Row 8
X
X
X
X
      
    

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)

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.

That is some powerful stuff!!

Files

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