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

I thought I would share with you guys some interesting links where you can witness web 2.0 in action.

CSS designs on display here: http://www.cssmania.com, http://www.cssbeauty.com, http://www.cssvault.com, http://www.webcreme.com

You can read some how to’s and the latest happenings here.

http://veerle.duoh.com/index.php, http://www.24ways.org, http://www.csszengarden.com

and you can catch some examples with source here

http://www.cssplay.co.uk

good day guys!!

Some Web designers regard a Web page that validates under both HTML and CSS guidelines as the Holy Grail. I prefer to think of validation as an extremely useful tool, but not a religion. CSS validation, however, is suited perfectly for debugging your code. CSS validators can catch those unclosed curly braces and other typos easily.

Numerous CSS validation services are available. I use the one from the W3C located at http://jigsaw.w3.org/css-validator/.

you can also validate your HTML here: http://validator.w3.org/

you can use the display property set to inline on the list item.

you can use the following line into your .css file to display list items horizontally

ul li{ display: inline; }

You can use the list-style-image property instead of list-style-type for your bullets.This property accepts a URL, which incorporates the path to your image file as a value.

ul{ list-style-image: url(bullet.gif) }

By default, browsers render a gap between heading and paragraph tags. This is
produced by a default top and bottom margin that browsers apply to these tags.
To remove all space between a heading and the paragraph that follows it, you
must not only remove the bottom margin from the heading, but also the top
margin from the paragraph. But since it can be inconvenient to target the first
paragraph following a heading with a CSS selector, it’s easier to simply assign a
negative bottom margin to the heading. Margins can be set to negative values,
though padding cannot.

h1 {
font: 10px Georgia;
margin-bottom: -10px;
}

try this to get rid of the large gap