What is the best way to style alternating rows in a table?

Question

Obviously, the actual style of the odd/even rows will be done via a CSS class, but what is the best way to "attach" the class to the rows? Is is better to put it in the markup, or is it better to do it via client-side javascript? Which is better and why?

For simplicity's sake, lets assume that this is a large table, 100 rows, and that the color scheme is alternating odd/even rows. Additionally, some sort of javascript library that can easily do this is needed elsewhere in the page and so the overhead of that package is not a factor.

---

The real goal of this question is to determine what trade-offs are involved as well as how those trade-offs should be handled, such as performance hits to the server if the page is hit under load(assume a dynamic table), bandwidth hits for users with lower connection speeds, semantic hits by adding additional layout code to the HTML (The idea here is that HTML is for content, CSS is for layout, and javascript is for how the content behaves as well as controlling/augmenting the layout)

Answer 1

For a table of such a large size I would do the row processing on the server side, using PHP or similar to calculate to odd/even class names for each row. This solution will work for those with JavaScript turned off and will be a lot higher performance than any JavaScript library processing a table element of this size.

In PHP the logic would look something like

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

If you cannot do any server-side processing I would recommend having the JavaScript set the class tags for each row rather than manipulating the styles directly. This way the presentation is left to the CSS and behaviour is left to the JavaScript and if you do change the way the classes are generated at a later date the presentation code will stay the same.

Answer 2

I'd put it in the markup (server side). It takes the server less than a millisecond to complete rowNum = (rowNum - 1) * -1 It's a pet peeve of mine when a website is slow because of how much javascript is being executed.

Answer 3

It depends on your scenario. JavaScript based may be quicker to implement for a number of rows if the table is not being created on-the-fly. If you're dynamically creating your table, however, you could pretty easily set the class for every other row to be "row_alternate" -- I prefer the server side method if you are concerned that some of your users may not have JavaScript.

Answer 4

You can do this fairly easily with jQuery, like so:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

You can qualify the selector a bit more if you just want to do this on one particular table, or do it on 'li' elements as well.

I think this is a bit cleaner and more readable client-side than it would be in some server-side environments,

Answer 5

If you're using any type of framework, this is usually one of the first features they include.

Else I googled for "jscript table alternating colors" and got several dozen links to techniques.

(Aside: It's too bad developers never get credit for the code they didn't write.)

Answer 6

As said in the other answers, doing it on a large table on the client side will be slower than on the server side, and may not work if the user has javascript disabled.

However, using a JS framework like jQuery makes it so easy that it's really tempting :

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 7

I always apply the class on the server side as they are streamed out/added to the page, but if you have a client-side re-sorting the rows will need to be re-classed.

Answer 8

I found a good site explaining what you want to achieve using jquery:

Here is the final output- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

And here is the tutorial- http://15daysofjquery.com/examples/zebra/

Answer 9

I would say really that it depends on the situation. If you are looping through the data to create the rows on the server side, I would probably say that you should do it there.

This gets a lot more complicated if you are going to start using client side script to sort/reorder the rows. In this case if it's 100 rows or so I might be inclined to do it on the onload event client side, because at least that way you aren't duplicating code to determine the row color. I'll admit, it really depends on the speed of it in this case. I would probably try it and see if the performance is acceptable before making a final decision.

Answer 10

I would do this initially server-side since the client may not have javascript enabled. If you are adding/removing rows client-side with javascript, then you may want to also have the ability to do it on the client after the add/remove event has completed. As much as possible you should try to have your interface behave well without Javascript unless you can control the browser environment (say, for example, in an intranet app where you can require that it be enabled).

Answer 11

Someday, we'll be able to just use pure CSS. Of course, this part of the CSS specification was introduced in 2001 and it's still not supported. =(

Answer 12

What you're trying to accomplished can even be done with CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

This is also listed in the w3's css3 selectors spec. If you're looking for compatibility, adding the class server-side or through javascript would be a far better solution.