How do you add alternating color to rows in a CSS table?

I have a CSS table that is being used with a MS Access database ASP page. I am trying to get alternating color rows. I have searched several sites for the code, but nothing is working. I have attached a code snippet of the CSS code I am using. Suggestions?

<style type="text/css">  
<!--   
table{   
    margin-left: 10px;
    border-color: #000080;
    border-spacing: 1px;   
    font-family:arial;
	font-size:13px;
	color:black;
    border-collapse: collapse;   
    width: 980px;   
}   
th {   
    text-align: left;   
    font-weight: bold;   
    padding: 3px;   
    border: 2px solid #000080;   
    background: #003399;   
    color: #FFFFFF;   
}   
td {   
    text-align: left;   
    font-weight: bold; 
    padding: 3px;   
    border: 1px solid #003399;   
    background: #003399;   
}   
td {   
    background: #f7f7f7;   
}   
-->

Open in new window

CSSASP

Last Comment

hielo

8/22/2022 - Mon

hielo

4/14/2008

You need to give alternating rows a different class name and set the colors on the class:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<style type="text/css">  
<!--   
table{   
    margin-left: 10px;
    border-color: #000080;
    border-spacing: 1px;   
    font-family:arial;
      font-size:13px;
      color:black;
    border-collapse: collapse;   
    width: 980px;   
}   
th {   
    text-align: left;   
    font-weight: bold;   
    padding: 3px;   
    border: 2px solid #000080;   
    background: #003399;   
    color: #FFFFFF;   
}   
td {   
    text-align: left;   
    font-weight: bold; 
    padding: 3px;   
    border: 1px solid #003399;    
}   
tr.odd {   
    background-color: #adadad;   
}   
tr.even {   
    background-color: #ffffff;   
}   
-->
</style> 
</head>
<body>
<table summary="">
<tr class="odd"><td>a</td></tr>
<tr class="even"><td>b</td></tr>
<tr class="odd"><td>c</td></tr>
<tr class="even"><td>d</td></tr>
</table>
</body>
</html>

Open in new window

davecestria

4/14/2008

You would have to specify this in your ASP code...

You could do this using the snippet i've posted or if you want to stick to CSS just remove the BGColor tag and insert a class tag, but you will have to create two different CSS entries. TH_one & TH_two for example.

<%
DIM mySQL, objRS
mySQL = "SELECT * FROM tblData" 
Set objRS = Server.CreateObject("ADODB.Recordset")
objRS.Open mySQL, objConn, adOpenKeySet
 
<table>
<tr><td>These are my database records.</td></tr>
 
<%
DIM iRecordCount
iRecordCount = 0
DO WHILE NOT objRS.EOF
 
IF iRecordCount Mod 2 = 0 THEN
%>
<tr bgcolor="#CCCCCC">
<%
ELSE
%>
<tr bgcolor="#FFFFFF">
END IF 
<td> <% objRS("Item") %> </td> </tr>
</table>
 
<%
iRecordCount = iRecordCount + 1
objRS.MoveNext
Loop
 
objRS.Close
Set objRS = Nothing
objConn.Close
Set objConn = Nothing
%>

Open in new window

kfranck

4/14/2008

ASKER

I am little confused on which one is the best solution. The ASP suggestion or the CSS suggestions?

I hate to bog you two down with a bunch of code, but I have included the entire CSS/ASP code, so you can advice which way to turn.

Appreciate your help and quick response.
kfranck

<html>
<head>
<style type="text/css">  
<!--   
table{   
    margin-left: 10px;
    border-color: #000080;
    border-spacing: 1px;   
    font-family:arial;
	font-size:13px;
	color:black;
    border-collapse: collapse;   
    width: 980px;   
}   
th {   
    text-align: left;   
    font-weight: bold;   
    padding: 3px;   
    border: 2px solid #000080;   
    background: #003399;   
    color: #FFFFFF;   
}   
td {   
    text-align: left;   
    font-weight: bold; 
    padding: 3px;   
    border: 1px solid #003399;   
    background: #003399;   
}   
td {   
    background: #f7f7f7;   
}   
-->  
</style>
<title>Staff Home addresses</title>
</head>
<blockquote>
<a align="center">
<p align="center"><font color="#004080">
<font face="Arial" style="font-size: 20pt"><b>STAFF HOME ADDRESSES</b></font><font face="Arial"><br>
</font></font>
 
<B>
<font size="2" face="Century Schoolbook">
<font color="#003264"><span class="contactus">
<font face="Verdana, Arial, Helvetica"><font size="2">Home Phone numbers, addresses, 
		cell phones<br>
		</font><font style="font-size: 6pt">If two numbers are listed with cell 
		phone, call the top number first. &nbsp;
		</font></font>
		</span>
	</font><SPAN class=contactus>
		<FONT size=1 face="Verdana, Arial, Helvetica"><BR><FONT color=#cc3300>(Updated 
		April, 2008)</FONT>&nbsp; </FONT></SPAN>
</font></B><font color="#004080"><font face="Arial">&nbsp;</font><font face="Arial" style="font-size: 20pt">&nbsp;</font></font>
</p>
</blockquote>
<table cellspacing="3" cellpadding="3" width="980"><tr>
   <th width="67"><font style="font-size: 13px">LAST<br>NAME</font></th>
   <th width="73"><font style="font-size: 12px">FIRST<br>NAME</font></th>
   <th><font style="font-size: 14px">ADDRESS</font></th>
   <th width="118"><font style="font-size: 12px">CITY &<br> STATE</font></th>
   <th width="80"><font style="font-size: 12px">ZIP</font></th>
   <th width="97"><font style="font-size: 12px">HOME<br> PHONE</font></th>
   <th width="116"><font style="font-size: 12px">EXTENSION</font></th>
   <th width="173"><font style="font-size: 12px">CELL<br>PHONE</font></th>
  
<%
'Dimension variables
Dim adoCon 			'Holds the Database Connection Object
Dim rsMasterRolodex			'Holds the recordset for the records in the database
 
'Create an ADO connection odject
Set adoCon = Server.CreateObject("ADODB.Connection")
 
'Set an active connection to the Connection object using a DSN-less connection
adoCon.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("Staffhome.mdb")
 
'Create an ADO recordset object
Set rsMasterRolodex = Server.CreateObject("ADODB.Recordset")
 
'Initialise the strSQL variable with an SQL statement to query the database
strSQL = "SELECT MASTER_Rolodex.* FROM MASTER_Rolodex;"
 
'Open the recordset with the SQL query 
rsMasterRolodex.Open strSQL, adoCon
 
'Loop through the recordset
    Do While not rsMasterRolodex.EOF
    'Write the HTML to display the current record in the recordset
    Response.Write "<tr><td>" & rsMasterRolodex.Fields("Last") & "</td>"
    Response.Write "<td>" & rsMasterRolodex.Fields("First") & "</td>"
   	Response.Write "<td>" & rsMasterRolodex.Fields("Address") & "</td>" 
	Response.Write "<td>" & rsMasterRolodex.Fields("CityState") & "</td>" 
	Response.Write "<td>" & rsMasterRolodex.Fields("ZIP") & "</td>" 
	Response.Write "<td>" & rsMasterRolodex.Fields("HomePhone") & "</td>" 
	Response.Write "<td>" & rsMasterRolodex.Fields("Extension") & "</td>" 
	Response.Write "<td>" & rsMasterRolodex.Fields("Cell")& "</td>" 
    Response.Write "</tr>"
        
    'Move to the next record in the recordset
     rsMasterRolodex.MoveNext
    Loop
%></body></html>

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

ASKER CERTIFIED SOLUTION

hielo

4/14/2008

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Ali Kayahan

4/14/2008

Hi kfranck ; to do that in easiest way you should create 2 different row style in css such as hielo did and switch between them with a loop such as davecestria did.The key point in here is declaring tr style as a variable and assing value to this variable via loop.

kfranck

4/14/2008

ASKER

Works like a CHARM! Thank you so much. I appreciate your responsiveness and help with the entire code. I thank and salute you!

hielo

4/14/2008

You are welcome!

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.