Alternating table row color?

Question

When generating html tabular data, I just wanted to hear what methods you use to alternate the table row color? For my purposes, I am using Java and JSPs on the backend. I was just planning on looping through the data and if index % 2 == 0 set it to one color else set it to something else. Is this ok? Maybe it would be better if I used some sort of tag library?

Answer 1

The general JSP guideline is to not interleave Java code in your JSP, but to use tags that encapsulate that Java code. So if I were you I'd avoid the index % 2 == 0.

You can do this in CSS3 using the even pseudo-selector as well. W3 has an example.

Answer 2

the easiest and nicest way is using css nth-child - but, sadly, it's not supported by IE. so, if you need a IE-compatible way, the one you do is ok.

EDIT: the css-solution wuld look like this:

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}     

Answer 3

We prefer to use JavaScript for table-row-coloring at client side. This even reduces (slight) burden from server. However this is not preferable for large tables (>100 rows)

Answer 4

That's the most simple solution which works with most browsers. See this answer for some in-depth discussion. If you can avoid IE6, then you can use CSS pseudo-selectors to achieve the same effect. Or you can use JavaScript.

If you need a global solution (i.e. one which works for all your tables without you having to do this looping in several places), you can use a filter and parse the HTML. As long as you keep your HTML clean, the filter can be pretty dump (just read into a buffer upto the next ">", then check what tag you have, add the missing attribute for TR and flush the buffer).

Lastly, you can wrap your tables in a common API (for example getColumns(), getRows() and getCell()) and use one JSP to render them all.

As for taglibs: If you have one, use it. If you don't, then you may be faster if you avoid JSPs altogether and instead write a helper class to format such a table in pure Java. That way, you can easily write unit tests and develop your solution without having to restart your web server all the time.

Answer 5

If you already are using jQuery, consider using the even (or odd) selector. There even is a table row coloring example on the documentation page for the even selector.

Answer 6

If you can use JSTL (much similar to Java-like solution, but better),

<c:forEach var="myItem" items="${myCollection}" varStatus="loop">
<tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>

Now have the CSS classes to define colors or other styles.

You can also consider using 'display' tag which does the same thing in server side or jQuery on client side to select rows with odd, even selectors and add the classes.

Answer 7

mootools zebra. David walsh has a good writeup http://davidwalsh.name/mootools-zebra-tables-plugin