Colour Changing Tables
Written by admin on May 8th, 2008 in Tutorials.
Okay. This isn’t all HTML, Its a bit of JavaScript but you will pick it up easily.
Right Plain tables can look boring and if there is a large amounts of rows with data alternating colours is not enough and it can get very annoying when you loose your place and can be stressful on the eyes.
So highlighting your table cells can be very helpful when reading down a list.
This tutorial will show you how to make a cell change colour (effectively highlight itself) when it is hovered over.
In your td tag place the following code:
<td onMouseover=”this.bgColor=’#FFCC00′”>
This will make your cell change colour when its hovered over. The value in the single quotes is the colour it will go.
what it is doing is saying. When hovered over this cells bgcolor = #FFCC00.
But this colour will stay and will not disappear.
So we need to tell the cell what to do when its not hovered over.
So add this after your mouse over attribute.
onMouseout=”this.bgColor=’#CCCCCC’”
Now your Cell tag should look like this:
<td onMouseover=”this.bgColor=’#FFCC00′” onMouseout=”this.bgColor=’#CCCCCC’” bgcolor=”#CCCCCC”>
Now your cells will change colour when hovered over.
Enjoy.