How to Alternate Table Row Colors in CSS and HTML

[John Smith]

http://www.somacon.com/p338.php
How to Alternate Table Row Colors in CSS and HTML

I just completed this article. Comments welcome!

 

[Beauregard T. Shagnasty]

http://www.somacon.com/p338.php
How to Alternate Table Row Colors in CSS and HTML

I just completed this article. Comments welcome!

Ok, that's a good explanation.

But you get 10 points off for that terrible aqua background color of
the page. <g>

Oh wait, that's my default background color; you didn't specify one!

 

[Adrienne]

http://www.somacon.com/p338.php
How to Alternate Table Row Colors in CSS and HTML

I just completed this article. Comments welcome!

For the ASP, this is a little cleaner, no need for confusing
response.writes:

<table>
<% while not rs.EOF
c = c + 1
if c mod 2 = 0 then
theclass = "colora"
else
theclass = "colorb"
end if
%>
<tr class="<%=theclass%>">
<td><%=data%></td>
</tr>
<% rs.Movenext
wend
rs.Close
set rs = nothing
%>
</table>

Then define colora and colorb either in the style element or in an
external stylesheet.

 

[John Smith]

Gazing into my crystal ball I observed John Smith <[email protected]>
writing in



For the ASP, this is a little cleaner, no need for confusing
response.writes:

<table>
<% while not rs.EOF
c = c + 1
if c mod 2 = 0 then
theclass = "colora"
else
theclass = "colorb"
end if
%>
<tr class="<%=theclass%>">
<td><%=data%></td>
</tr>
<% rs.Movenext
wend
rs.Close
set rs = nothing
%>
</table>

Then define colora and colorb either in the style element or in an
external stylesheet.

Yeah, that's how I used to write my loops, but I improved it to the
method in my article. Using response.write has some advantages in that
it preserves the indentation of your code, and it may be somewhat easier
to migrate to any future language.

Using "colora" and "colorb" as the class names is specifically to be
avoided as I pointed out in my article. Names like "c0" and "c1" would
be shorter and result in shorter HTML output. Exactly as I pointed out
in my article, your method takes several lines to alternate the class
name, whereas my method can be done inline.

Furthermore, if you use "mod" instead of "and", you are doing the
equivalent of a division operation on every loop iteration. "Mod" takes
dozens of CPU cycles whereas "and" typically takes only one. When I
tested ASP performance, I noticed the time difference on long loops.
ASP doesn't optimizes the expression (c Mod 2 = 0) automatically. Many
people need their pages to run as fast as possible.

Thanks for your comments.

 

[dingbat]

no need for confusing response.writes:

You've never had to performance tune an ASP site, have you ?

 

[Andy Dingley]

Furthermore, if you use "mod" instead of "and", you are doing the
equivalent of a division operation on every loop iteration.

Do you have a hat ? Because if you do, and this makes the slightest
difference, then I'll eat it.

"Mod" takes dozens of CPU cycles whereas "and" typically takes only one.

Agreed. But it's the 21st century - we have CPU cycles to burn! In
amongst all the many tasks going on to output a page, I will be _amazed_
if the overhead due to mod vs. and (which I'm sure is real) is anything
like significant.

Personally I'd stick with Mod, not And. This is for three reasons:

- It's clearer. Code that's self-explanatory always beats code that
needs a comment to explain it.

- Code with Mod is easily changed to put the stripes out every 3 or 5
lines. And isn't.

- And relies on "And" meaning a bitwise and on that platform, not a
logical and. That's a big assumption to make for long-term code that
might get ported.

 

[John Smith]

Do you have a hat ? Because if you do, and this makes the slightest
difference, then I'll eat it.




Agreed. But it's the 21st century - we have CPU cycles to burn! In
amongst all the many tasks going on to output a page, I will be _amazed_
if the overhead due to mod vs. and (which I'm sure is real) is anything
like significant.

Personally I'd stick with Mod, not And. This is for three reasons:

- It's clearer. Code that's self-explanatory always beats code that
needs a comment to explain it.

- Code with Mod is easily changed to put the stripes out every 3 or 5
lines. And isn't.

- And relies on "And" meaning a bitwise and on that platform, not a
logical and. That's a big assumption to make for long-term code that
might get ported.

<%
' http://www.arcticlabs.com/
Set objStopwatch = Server.CreateObject("Toolsack.Stopwatch")
objStopwatch.Start()
i = 0
For i = 0 To 1000000
'j = i Mod 2
j = i And 1
Next
Response.write FormatNumber(objStopwatch.Stop() * 1000, 10) & "
milliseconds"
%>

I did a little test to compare "Mod" vs "And", and I found no difference
in execution time for one million executions. The above script takes
about 915 ms on my system regardless of which line is uncommented. This
may mean the overhead of processing the individual line of script is
much higher than the difference in cost between the two operators.

Sometimes when one agressively tries to optimize code, one makes changes
that should work theoretically, but practically have no effect. I based
my experience with optimizing some C programs, where "mod" had a big
effect in some tight loops versus using "and".

In ASP, of your three reasons, I think number two is most compelling.

 

[Adrienne]

Gazing into my crystal ball I observed (e-mail address removed) writing in

You've never had to performance tune an ASP site, have you ?

Yes, I have, and I find that interleaved text output is
A) Faster
B) Easier to debug

Consider the following:

<% option explicit

dim i

response.write "<table summary=""Sample Table"">"
response.write "<caption>Sample Table</caption>"
response.write "<thead>"
response.write "<tr>"
response.write "<th>Header1</th><th>Header2</th><th>
Header3</th>"
response.write "</tr>"
response.write "</thead>"
response.write "<tbody>"
for i = 1 to 10
response.write "<tr>"
response.write "<td>Column 1 - data" & i & "</td>"
response.write "<td>Column 2 - data" & i & "</td>"
response.write "td>Column 3 - data" & i & "</td>"
response.write "</tr>"
next
response.write "</tbody>"
response.write "</table>"

%>

I made an obvious error in the markup. It would be a lot easier to find
if the markup is interleaved with the ASP coding.

For that matter, it seems to me that just as one separates content from
presentation, one should separate markup from code.

Here's some interesting reading to support this:
<http://www.4guysfromrolla.com/webtech/021302-1.shtml>

 

[dingbat]

Then your benchmarks need work.

ASP code _sucks_. The vast body of ASP code out there is hideous crap
produced by barely skilled HTML coders who suddenly decided (or were
told) that they were "programmers". Apart from the whole discipline of
decades of software engineering, they could benefit a lot by looking at
the Java world. In particular the emerging split between Servlets, JSP
and the Triangle pattern. There's a whole lot wrong with this
interleaved code and data approach when you have to manage major
branches in program execution.

 

[dingbat]

That's exactly my point. In a "bare code" benchmark, Mod may indeed
have some huge speed advantage over And.

But we're not coding benchmarks here, we're coding HTML output. In a
page that has database access and Server.HTMLEncode() in it, I'm just
not going to start worrying about the cost of doing Mod vs. And.

You'd be better off replacing the class selection for a <tr> selection
i.e.:
Response.Write ("<tr class='" + (iRowCount++ %2) ? "odd" :"even")
+ "'>");

by
Response.Write ((iRowCount++ %2) ? "<tr class='odd'>" : "<tr
class='odd'>" ));

and saving yourself some string concatenation than you would by
counting the gnat's whiskers on this Mod