How to Alternate Table Row Colors in CSS and HTML

Discussion in 'HTML' started by John Smith, Aug 8, 2005.

  1. John Smith

    John Smith Guest

    John Smith, Aug 8, 2005
    #1
    1. Advertising

  2. John Smith wrote:
    > 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!

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Aug 8, 2005
    #2
    1. Advertising

  3. John Smith

    Adrienne Guest

    Gazing into my crystal ball I observed John Smith <>
    writing in news::

    > 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.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, Aug 8, 2005
    #3
  4. John Smith

    John Smith Guest

    Adrienne wrote:
    > Gazing into my crystal ball I observed John Smith <>
    > writing in news::
    >
    >
    >>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.
    >


    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.
    John Smith, Aug 8, 2005
    #4
  5. John Smith

    Guest

    > no need for confusing response.writes:

    You've never had to performance tune an ASP site, have you ?
    , Aug 8, 2005
    #5
  6. John Smith

    Andy Dingley Guest

    On Mon, 08 Aug 2005 10:44:03 -0400, John Smith <>
    wrote:

    >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.
    Andy Dingley, Aug 9, 2005
    #6
  7. John Smith

    John Smith Guest

    Andy Dingley wrote:
    > On Mon, 08 Aug 2005 10:44:03 -0400, John Smith <>
    > wrote:
    >
    >
    >>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.



    <%
    ' 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.
    John Smith, Aug 9, 2005
    #7
  8. John Smith

    Adrienne Guest

    Gazing into my crystal ball I observed writing in
    news::

    >> no need for confusing response.writes:

    >
    > 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>



    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, Aug 9, 2005
    #8
  9. John Smith

    Guest

    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.
    , Aug 9, 2005
    #9
  10. John Smith

    Guest

    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
    , Aug 9, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt
    Replies:
    5
    Views:
    604
    David Carlisle
    Oct 27, 2004
  2. Chris
    Replies:
    2
    Views:
    669
    Chris
    Mar 4, 2007
  3. AAaron123

    TreeNode colors come from anchor colors

    AAaron123, Aug 7, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    528
    darrel
    Aug 7, 2008
  4. Replies:
    10
    Views:
    326
    Sean O'Halpin
    Jul 17, 2006
  5. Amy
    Replies:
    4
    Views:
    149
Loading...

Share This Page