kfranck
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;
}
-->
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.
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
%>
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
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.
</font></font>
</span>
</font><SPAN class=contactus>
<FONT size=1 face="Verdana, Arial, Helvetica"><BR><FONT color=#cc3300>(Updated
April, 2008)</FONT> </FONT></SPAN>
</font></B><font color="#004080"><font face="Arial"> </font><font face="Arial" style="font-size: 20pt"> </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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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!
Open in new window