Monday, 25 October 2010

ASP: simple alternating colour rows in a dynamic table

   


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
123
456
789
1011...

And that's all.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.