 | | Highlighting Table Rows | This is so easy you'll wonder why you have never tried it before. Highlighting rows of table data with a new background colour on mouseover is a very nice way to accentuate current data for the viewer. When the user hovers over a row, the colour changes, highlighting the enclosed data for easy viewing. This makes it easier for the eye to see what it is meant to see.
All you need to do is add a very small piece of CSS code into the <TR> tag as shown below. Choose whichever colour you would like.
<TABLE border="1" cellpadding="5" style="font-family:verdana; font-size:11px;">
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#ffff99';" onMouseOut="this.bgColor='#ffffff';">
<TD>Row 1, Cell 1</td>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
<TD>Row 1, Cell 4</TD>
<TD>Row 1, Cell 5</TD>
</TR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#cccccc';" onMouseOut="this.bgColor='#ffffff';">
<TD>Row 2, Cell 1</td>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
<TD>Row 2, Cell 4</TD>
<TD>Row 2, Cell 5</TD>
</TR>
</TABLE>
Before you ask ... yes, you can also do this with the individual table cells by adding this code inside the <TD> tag.
Example:
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | Row 1, Cell 4 | Row 1, Cell 5 | | Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 | Row 2, Cell 4 | Row 2, Cell 5 |
|
| |
