It can be difficult to ensure that you remain on a particular row as your eyes work across a large data table. Displaying table rows in alternating colors is a common way to help users identify which row they’re focused on. Whether you’re adding rows by hand, or you’re displaying the data from a database, you can use CSS classes to create this effect. However, there are two ways of implementing this:

1. Display alternate rows by default with an alternating color OR
2. Change row colors dynamically on mouse-over or on hovering the table rows.
I prefer the 2nd option as it is easier to maintain the color scheme in blend with the color scheme of the whole page. This is how we will implement this

Step 1: Define styles for the table
I shall declare a class called mytable and shall define a style for my table in general
.mytable{
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 50%;
}

Step 2: Define styles for the header row

.mytable th {
border: 1px solid #828282;
background-color: #515151;
color: #66FF33;
font-weight: bold;
text-align: left;
padding: 4px;
}

Step 3: Define styles for the table cells

by default all cells will be applied with a dotted border and will be padded with 4px of space

.mytable td{
border: 1px dotted #aaa;
padding: 4px;
}

for some special cells I would like to change the text color to something bright so that it stands out, for which I define another style

.mytable td.alt{
background-color: transparent;
color: #00FFCC;
}

Step 4: Define styles while a mouse is hovered over a row

.mytable tr:hover{
background-color:#aaa;
color: #fff;
}

and presto we have a style definitions for a table that changes color on mouse hover and the result looks something like this

you can copy all the above defined styles into a CSS file and link the stylesheet to your HTML document to acheive at the above result.

Hope this was helpful