View Finished Product
Download Sample Graphics used in this tutorial

A Common misconception is that CSS bans all tables. Truth is: no, it doesn�t. CSS Standards only say that tables should not be used for layout, only for tabular data. That being data like your companies sales in 2005. In this tutorial I will show you how you can make standard-compliant tables that look great.

Part 1: The Raw Deal
The first thing you have to do is set up your table, no formatting. I chose to recreate an iTunes playlist (bear with me on that one). I chose 4 columns: Name, Artist, Runtime and Genre.

There is one important thing to making �proper� tables: you have to use the <thead> and <th> tags. Most people have never heard of them before, which is understandable, but a real pity. Here�s how you use them: the <thead> tag dictates which row contains the categories into which the table data will be grouped, so in my case the top row, which contains Name, Artist, Runtime and Genre. The <th> tag replaces the <td> tag in the row we labelled <thead>. Just to make this clearer, here�s the code for the table layout:



Hopefully you see what I meant by the above paragraph. If not, check the W3 website for more info on tables and tags.


Part 2: The CSS
You can see I already put some data into the table. Preview your table and you will probably see an ugly, normal table. We want to change that using the power of CSS. First Things First. We have to change the general look of the table. Let�s get Rid of that ugly TNR font and exchange it for something more iTunes-Like. Also we will exchange that ugly border for a nice thin one. And last off well set a total width of the table. This helps a lot when having to integrate a table into a layout, since it�s important to keep the sizes right. OK, so our mark-up until now is this:



Simple, Right? You will already see your table looking better ;). Next up we will style those table headers. Now you can see why we used that <th> tag. This way we can style the headers separately from the rest of the data without having to add nasty span or div tags. We want them to stand out from the rest of the tags, but also we want to give them a nice background, since we want to get as close as possible to the iTunes layout. What I did was take a screenshot of my iTunes and cut out a 1px wide sample of the gradient. You can download it from the link at the beginning of this tutorial. Now, we want to add that as a background for all our table headers.



Here�s what we did: The height is set to fit the height of the gradient. Then we make the text colour a lighter shade of black. Next we add some padding to not make it looked so squashed, and last not but not least we add our background image. The background-repeat: repeat-x; has the effect that the background is only repeated along the x-axis, which is what we want.

Next up we want to style the rest of the tabular data. The only thing there really is to do is to rearrange the padding. You will notice that a) the rows are squashed together and b) the left column touches the border, which looks unclean. So we add some padding. Here�s how the padding works.

Padding: (padding-top) (padding-left) (padding-bottom) (padding-right)

Practically you go clockwise from the top.



But there�s still one thing missing: iTunes uses alternating row colours. So we can�t leave those out can we? This part actually requires adding some classes to the rows. So we create a class called .blue and give it the background colour #eee, which is a light blue.



Now we apply this class to every other row like this:



You see where I added the .blue class to the second table row? Alternating row colours galore! Now for all those of you who want to add some more style to your iTunes Playlist, how about adding some mouse-over effects. Remember that these DO NOT work in Internet Explorer. You can create a JavaScript Workaround, but we might just leave that for the next tutorial. The first :hover state we will add is to the table headers. When you roll over them, the background will change from the silver gradient to a blue one, just like in iTunes. All we need is a very little amount of CSS.



This changes the background image when you hover over the table header. Simple, isn�t it?
How about adding a roll over effect form rows. A simple change in background color will do for this.



Here what this does. When someone hovers over the row, the <td> gets a new background color. Why are we changing the color of the <td>, and not simply the row? if we were to change the color of the row, the <th> would get an ugly border at the bottom. Of course we will have to change the color of the text to white, otherwise it would be impossible to distinguish it from the background.

VOILA, a great working standards-compliant table that looks great. Have a look at the end result by following the link at the beginning of this tutorial.

Hope you enjoyed this little lesson, Nik