Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Hello all,

This blog post is for my own reference mainly for a technique I have read and learnt about. What I was looking for was to be able to style alternative rows a different colour, similar to the popular layout of iTunes where the row colour alternates between dark and light blue.

I wanted to be able to achieve this affect easily without having to add Classes to my table for each different row manually, I wanted this to be automatic so it can be used in CMS systems without the end user having to ammend the HTML code on the table. I know that in the future we will not have to use JavaScript to help us do this as the new CSS3 selectors will allow us to do this.

This is the CSS rule that will be used in the future and will obviously style all odd table rows with the background colour red.

tr:nth-child(odd)
{
background-color:red;

}

Before we go any further, lets view the example of a table with alternative row colours with the use of JavaScript and CSS

Now you have seen the example, feel free to view the source of the page and learn from it - however I cannot take credit for the work, as this was something I found on another blog.

I will edit this post in the next few days when I fully understand the JavaScript and how it is functioning so I can try and explain it - so watch this space.