DevPapers - article Coloring every other row in a Table

Often times, there's a need to display data in a table containing several columns and MANY MANY rows.

At times like this, it gets a little difficult to read the data due to the many different columns and rows.

Example:

One nice way to "visually organize" the information is by coloring every other row so

that way it’s very clear to the user what row is being read.

The data can come from different sources but for the sake of this example let’s get it from an array.

<%

Option explicit

Dim array(20,0), i, intCounter, ColorClass

For i=0 to 20 ' This populates the array

array(i,0)="Row "&i

Next

%>

<html><head><title>Colored Table</title><style>

.class1{ background-color:#D7DFE7}

.class2{ background-color:#F1F4F7}

.TD{FONT-FAMILY: arial;FONT-SIZE: 12px;COLOR: #333333}

</style></head>

<body>

<table cellspacing="0" cellpadding="3" border="0" width="500" class="td">

<tr bgcolor="#CCD6E0">

<td><b>Column 1</b></td><td><b>Column 2</b></td><td><b>Column 3</b></td>

<td><b>Column 4</b></td><td><b>Column 5</b></td></tr>

<%

intCounter=0

for i=0 to ubound(array) ' Here we are displaying every single item stored in our array trough a loop

if intCounter mod 2 = 0 then ' This line determines whether the row's number is even or not

            ColorClass="class1" ' This color will be the FIRST row and every other row

else

            ColorClass="class2" ' This color will be the SECOND row and every other row

end if%>

<tr class="<%= ColorClass %>" height="20">

    <td><%= array(i,0) %></td>

    <td>Random Data 2</td>

    <td>Random Data 3</td>

    <td>Random Data 4</td>

    <td>Random Data 5</td>

</tr>

<% intCounter=intCounter+1

   next %>

</table></body></html>

The key element here is the MOD operator which divides two numbers and returns the remainder.

The reminder will help us determine if the row number is an even number or an odd number.

We use CSS Classes to set the 2 different colors for the rows.

Here’s the final output:

This is much more “visually organized“ and it makes it easier to read the data.

Enjoy!

Questions?

Write me, Romeo Marquez Guzman romeo@gelattina.com