How to Create a Table with Horizontal separator for Rows only

Please see the image shown below. I want to create a HTML tables like this, where table rows (<tr>) are separated by a single line from each other. There are no vertical border for columns. And also 2 consecutive rows are with a different background colors - say all odd rows are light blue colored background and all even rows are white colored background. Please supply the relevant CSS code for this.



Basically I wanted to create some Report/Spreadsheet kind of page where rows of data will be there. So I need it to look like this.

 

You can use CSS to make this easy. The CSS is below :

#tableborder {
border-bottom-style:solid;
border-color: #c0c0c0;
}

Code (markup):

Also, you should add this ID to your table cells ( td ) . Example shown below :

<td id="tableborder">

HTML:

So, here is another example of how it'll work in a real HTML table :

<table>

<tr>

<td id="tableborder">example of table</td>

</tr>

<tr>

<td id="tableborder">example of table</td>

</tr>

</table>

HTML:

 

download a 'kompozer' and let him do the the coding.. its like creating a table at excel.

 

I don't think CSS 2.1 could create different background color effect in consecutive rows, without the help of javascript (not sure about CSS 3 though).

Assuming the target table has an id #mytable, the following untested script might give you an idea:

	var trs = document.getElementById("mytable").getElementsByTagName("tr");
	for (var i=0; i < trs.length; i++){
		if (i % 2){
			trs[i].style.backgroundColor = "gray";
		}
		else{
			trs[i].style.backgroundColor = "white";
		}
	}

HTML:

 

No CSS2 can't target alternating rows, CSS3 can. But combined with scripting, php/asp/etc. you can have the code write css for alternating rows.
<?php print '<tr class="bg-color1">' ?>
<?php print '<tr class="bg-color2">' ?>