ASP: simple alternating colour rows in a dynamic table

Tweet

There is a very simple way of presenting a dynamic table with alternate colours for rows. In order to achieve this effect we can use CSS and ASP.
First of all, prepare the CSS style for your rows as follow:

<style type="text/css">
<!--
table.sample tr.d0 td {
    background-color: #0C50DA;
}
table.sample tr.d1 td {
    background-color: #2B78ED;
}
-->
</style>

The background-color determines the colours you will use for the rows. In our example, it will be two shades of blue.
Now create your dynamic table:

    <table width="100%" border="1" class="sample">
      <tr>
        <th scope="col">First Column Header</th>
        <th scope="col">Second Column Header</th>
        <th scope="col">Third Column Header</th>
      </tr>
<%j=0%>
<%
While Not rs.EOF%>
<%j = j + 1
      Response.write "<tr class=""d" & (j And 1) & """>"%>
          <td><%=rs.Fields.Item("fieldname1").value%></td>
          <td><%=rs.Fields.Item("fieldname2").value%></td>
          <td><%=rs.Fields.Item("fieldname3").value%></td>
        </tr>
<%
rs.MoveNext
Wend
%>
</table>

Please notice that rs is actually the name of the recordset you have previously opened (I will not give here the code for the recordset handling).
Please note that the table we created has a class called "sample": what we are doing is simply alternating its <tr> tag class, between d0 and d1.
The final effect is this:

First Column Header	Second Column Header	Third Column Header
1	2	3
4	5	6
7	8	9
10	11	...

And that's all.