Link to home
Start Free TrialLog in
Avatar of kfranck
kfranckFlag for United States of America

asked on

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

Avatar of hielo
hielo
Flag of Wallis and Futuna image

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

Avatar of davecestria
davecestria

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

Avatar of kfranck

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

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of kfranck

ASKER

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