How to create zebra stripes in JSP tables

It's been a long time since I worked on an old-school JSP (without the benefit of a framework like JSF or Struts), but I've wanted to add alternating row stripes ("zebra stripes") to some HTML tables in some old JSP's for a long time. I like tables with zebra stripes because they're easier to read, so now that I have some free time, I finally got this done.

Now that I have all of my JSP/CSS code working properly, I thought I'd share it all here in the form of a "recipe".

Problem

You want to create the effect of alternating row colors in an HTML table (i.e., "row stripes", or "zebra stripes") in a plain old JSP (i.e., using plain JSP syntax, without using a framework like JSF or Struts).

Solution

There are two parts to this solution, and neither one is too hard:

1.Alternate the CSS tags for your TR elements as you emit your TABLE HTML code.
2.Define your new even and odd CSS tags.

I'll show you how I did this, and you can adapt the code as needed for your JSP code.

Adding the alternating CSS tags to your table

In my JSP code I followed a simple algorithm to emit the alternating CSS tags inside my <tr> tags. All I did was create a counter that was incremented each time a new table row was emitted, and then I used that counter and the modulus operator to determine whether I was emitting an even or odd row. When I emitted an even row I printed an even CSS tag, and when I emitted an odd row I printed an odd CSS tag.

The following JSP code snippet shows what I did. Here's a quick summary of what this code does:

First, I create three fields that I'll need later (rowCounter, evenOddValue, and evenOdd).
Second, I start emitting my table rows in a while loop. In increment the row counter, then use the modulus operator on the row counter to set the value of the evenOddValuevariable to either 0 or 1.
Third, when I actually emit the <tr> element, I emit it with a class that will either be named "even" or "odd". This value is pulled from my little String array named evenOdd, and is based on the evenOddValue.

Given that introduction, here's my JSP code:

// i have already emitted the <table> tag, and 
// i'm just about to start emitting the <tr> and <td>
// tags.

// (1) fields we'll need shortly
int rowCounter = 0;                  // counts the number of rows emitted
int evenOddValue = 0;                // alternates between 0 and 1
String[] evenOdd = {"even", "odd"};  // two-element String array

// (2) start outputting the table rows
while ( listOfRows.hasNext() )
{
  rowCounter++;

  // set evenOddValue to 0 or 1 based on rowCounter
  evenOddValue = 1;
  if (rowCounter % 2 == 0) evenOddValue = 0;

  // do whatever else you need to do ...
%>

<%-- (3) later in the code, emit the <tr> tag --%>
<%-- emit a class of either "even" or "odd" in the <tr> tag --%>
<tr class="<%=evenOdd[evenOddValue]%>">

I hope that makes sense. I didn't want to print all of the JSP code in this area, because there are other complicated things going on that are unrelated to what I want to show here.

With this done, all we have to do now is define our CSS styles for the even and odd CSS styles.

Defining the CSS styles

I still have a lot to learn about CSS styling, but fortunately it's pretty easy to define a CSS style for myeven and odd rows. In my case, because I emit my <table> with a class named topics_table, like this:

<table class="topics_table">

I need to reference that tag topics_table in my even and odd tag definitions.

That being said, all I had to do to get my alternating table row colors working was to create a style as shown below, and then include this style in the <head> section of my JSP:

<style type="text/css">
#topics_table tr.even td {
  background-color: orange;
}
#topics_table tr.odd td {
  background-color: yellow;
}
</style>

Depending on how you have your CSS defined for your JSP, your tag definitions may be a little cleaner than what I have shown, but this is what I needed to do for my particular case.

Also, instead of including your CSS tags in the <head> section of your JSP/HTML, you'll probably want to move it out to a separate file, something like styles.css, but I was trying to keep my example simple here.

Finally, I didn't really stripe my tables using orange and yellow as shown above, but because the actual color shades I used are only slightly different, I wanted to make them more obvious here.

Summary

Creating alternating table row colors (zebra striping) is not too hard. There are two parts to the solution, and both parts are pretty easy:

Alternate the CSS tags for your TR elements as you emit your <table> HTML code.
Define your new even and odd CSS tags.