Formatting Rows in ASP Tables 2

Terpsfan · Nov 26, 2002

I would like to know how to format the rows in an asp table so that I get alternating rows of gray and white background. I see these on the web all the time, just don't know how to do it.

Transcend · Nov 26, 2002

Hi there

the way i do it .. is in my stylesheet (.css file) i have some that looks like

.Alternate
{
BACKGROUND-COLOR: #cccccc
}

where #cccccc is an alternative color

then when i am printing a table i do this

while not rst.EOF
RecordCounter = RecordCounter + 1
If RecordCounter Mod 2 = 1 Then
Response.Write "<TR class='Alternate'>"
else
Response.Write "<TR>"
End If
'then print the current record

End

Transcend

Terpsfan · Nov 26, 2002

Thanks for responding. So the style sheet is in a separate file that you call like a procedure? And does the style sheet look exactly like you just wrote? Sorry, I'm kinda new to web programming. Excuse my ignorance.

Transcend · Nov 26, 2002

Hi there

a style sheet is a .css file that you should create for your site, you might want to look up style sheets and how to write them.
You reference it in the html header like so

<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<link REL="stylesheet" TYPE="text/css" HREF="stylesheetname.css">

What I pasted earlier is only one part of my style sheet, it's too long to paste all of it

Transcend

Transcend · Nov 26, 2002

And yes ... the .css file is basically a separate text file ...

transcend

Tarwn · Nov 27, 2002

You can also include these styles at the top of your html file in the head section like so:

Code:

<html>
<head>
<style>
   /* You can create your own classes */
   .row0{
      color: #eeeeee; /* Hex RBG Color for foreground*/
   }
   .row1{
      color: #aaaaee;
   }
   /* Or you can overide existing tag defaults */
   table{
      width:75%;
   }
</style>
</head>
<body>
<table>
   <tr class=&quot;row0&quot;>
      <td>
...

Or you can actually write style into a tag like so:

Code:

<table style=&quot;width:75%;border:1px solid #dddddd;&quot;>

Another way to do your alternating row colors is to use the counter inside your loop and assign one of two classes based no it, similar to above:

Code:

while not rst.EOF 
   RecordCounter = RecordCounter + 1
   Response.Write &quot;<tr class='row&quot; & RecordCounter mod 2 & &quot;'>&quot;
   
wend

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
This space has nothing in it, it's all ni your imagination

Terpsfan · Nov 27, 2002

Thanks everyone for your reply, I'm still trying to understand this, which method to use and where.

HTML>
<HEAD>
<TITLE>Maryland Basketball Alumni <%=Now%></TITLE>
</HEAD>
<CENTER>
<H1>TERPS Players in the NBA!</H1>
<BODY BGCOLOR = "BEIGE" TEXT = "RED">
<HR>
<IMG SRC="j0305651.wmf" WIDTH=90 HEIGHT=90>
<IMG SRC="j0151209.wmf" WIDTH=90 HEIGHT=90>

<%
dim objRec
dim SQL
dim objConn
SQL = "SELECT * FROM qryNBA"
Set objConn = Server.CreateObject("ADODB.Connection&quot

objConn.Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("\vbprogrammer38\db\MDSports.mdb&quot

)

Set objRec = objConn.Execute(SQL)

Response.Write "<HR>"
Response.Write "<TABLE BORDER = 1 >"
Response.Write "<TR BGColor = Red Align = Center><TD>" & "Last Name" & "</TD>"
Response.Write "<TD>" & "First Name" & "</TD>"
Response.Write "<TD>" & "Team" & "</TD>"
Response.Write "<TD>" & "Games" & "</TD>"
Response.Write "<TD>" & "Points" & "</TD>"
Response.Write "<TD>" & "PPG" & "</TD>"
Response.Write "<TD>" & "FG" & "</TD>"
Response.Write "<TD>" & "FGA" & "</TD>"
Response.Write "<TD>" & "FGP" & "</TD>"
Response.Write "<TD>" & "RB" & "</TD>"
Response.Write "<TD>" & "RPG" & "</TD>"
Response.Write "<TD>" & "AST" & "</TD>"
Response.Write "<TD>" & "APG" & "</TD></TR>"
Do While Not objRec.EOF
Response.Write "<TR Align = Center BGColor = White><TD>" & objRec("PlayerLname&quot

& "</TD>"
Response.Write "<TD>" & objRec("PlayerFname&quot

& "</TD>"
Response.Write "<TD>" & objRec("Team&quot

& "</TD>"
Response.Write "<TD>" & objRec("Games&quot

& "</TD>"
Response.Write "<TD>" & objRec("Points&quot

& "</TD>"
Response.Write "<TD>" & FormatNumber(objRec("PPG&quot

,1) & "</TD>"
Response.Write "<TD>" & objRec("FG&quot

& "</TD>"
Response.Write "<TD>" & objRec("FGA&quot

& "</TD>"
Response.Write "<TD>" & FormatPercent(objRec("FGP&quot

,1) & "</TD>"
Response.Write "<TD>" & objRec("RB&quot

& "</TD>"
Response.Write "<TD>" & FormatNumber(objRec("RPG&quot

,1) & "</TD>"
Response.Write "<TD>" & objRec("AST&quot

& "</TD>"
Response.Write "<TD>" & FormatNumber(objRec("APG&quot

,1) & "</TD></TR>"

objRec.MoveNext
Loop
Response.Write "</TABLE>"

objRec.Close
Set objRec = Nothing
objConn.Close
Set objConn = Nothing

%>
</BODY>
</CENTER>
</HTML>

Tarwn · Nov 27, 2002

Any of the methods would work. The easiest in this case would be to define some classes to replace all the font tags and so on you have, like so:

Code:

<HTML>
<HEAD>
<TITLE>Maryland Basketball Alumni <%=Now%></TITLE>
<STYLE>
   .colHead{
      font-size:3pt;
      color:yellow;
      font-weight:bold;
      background-color:red;
      text-align:center;
   }
   .colCell{
      font-weight:bold;
      font-style:italic;
      color:#222277; /* should be navyish */
      text-align:center;
   }
   .row_0{
      background-color:white;
   }
   .row_1{
      background-color:#dddddd; /* light gray */
   }
</STYLE>
</HEAD>
.
.
.
Response.Write &quot;<TABLE BORDER='1' cellspacing='0'>&quot;
Response.Write &quot;<TR>&quot;
Response.Write &quot;<TD class='colHead'>&quot; & &quot;Last Name&quot; & &quot;</TD>&quot;
Response.Write &quot;<TD class='colHead'>&quot; & &quot;First Name&quot; & &quot;</TD>&quot;
Response.Write &quot;<TD class='colHead'>&quot; & &quot;Team&quot; & &quot;TD>&quot;
.
.
.
Dim rowCtr
Do While Not objRec.EOF
   Response.Write &quot;<TR class='row_&quot; & rowCtr mod 2 & &quot;'>&quot;
   Response.Write &quot;<TD class='colCell'>&quot; & objRec(&quot;PlayerLname&quot;) & &quot;</TD>&quot;
        Response.Write &quot;<TD class='colCell'>&quot; & objRec(&quot;PlayerFname&quot;) & &quot;</TD>&quot;
        Response.Write &quot;<TD class='colCell'>&quot; & objRec(&quot;Team&quot;) & &quot;</TD>&quot;
.
.
.
   rowCtr = rowCtr + 1
   objRec.MoveNext
Loop
.
.
.

There you go. Now if you decide to change the color scheme or the font size, or even the font, you can do this in a single place. This also takes care of alternating row colors.

This also allows you to have finer control over the colors and look and feel. Take the border for instance, if you remove that border from your table tage you could add it to each cell or the whole table like so:

Code:

   .colHead{
      border:1px solid #666666;
      font-size:3pt;
      color:yellow;
      font-weight:bold;
      background-color:red;
      text-align:center;
   }

Border has three major attributes, color, width, and line type.
You can also split these up to define the left, right, top, or bottom border seperately.

Here is a good reference from one of the site partners:

http://www.w3schools.com/css/default.asp

Have fun

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
This space has nothing in it, it's all ni your imagination

Terpsfan · Nov 28, 2002

Thanks Tarwan, that really did the trick. Now it makes sense to me. It's always a lot simpler than you first think. Happy Thanksgiving

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Formatting Rows in ASP Tables 2

Terpsfan

Programmer

Transcend

Programmer

Terpsfan

Programmer

Transcend

Programmer

Transcend

Programmer

Tarwn

Programmer

Terpsfan

Programmer

Tarwn

Programmer

Terpsfan

Programmer

Similar threads

Part and Inventory Search

Sponsor