Zebra Tables: How to alternate table row colors

Andreas — Tue, 14 Apr 2009 14:17:23 +0000

What is a “Zebra Table”? It’s a striped table with alternating row colors like this:

A simple Zebra Table

You can achieve this with very different approaches:

CSS only

With CSS 3 you can achieve such a table with the pseudo class nth-child. The rules are extremly simple and no additonal markup is required. Just add these lines to your CSS:

tr:nth-child(even) {background-color: #FFF}
tr:nth-child(odd) {background-color: #FFCC00}

But since not all browsers understand this CSS 3 selector this is perhaps not the best solution.
Instead of relying on Browsers CSS 3 support you can also use JavaScript to achieve the same result.
There is a great article on the jQuery-Blog with examples for all major JS-Framework. Take a look: http://blog.jquery.com/2006/10/18/zebra-table-showdown/

Using PHP to add classes

If you don’t want to use the CSS-only or the JavaScript solution you can use one of the following solutions. The basic idea is to add classes to your rows that indicate if it is an even or an odd row. You can do this by adding an “odd” class to odd rows and an “even” class to even rows. Or if you want a more minimalistic approach: Just add an “altrow” class to odd rows. It could look like this:

Or:

And style it with CSS like this:

.even { background-color:#FFF; }
.odd { background-color:#FFCC00;}

tr { background-color:#FFF; }
tr.altrow{ background-color:#FFCC00;}

So how do we add those class names with PHP. I assume we have the following array with animals and want to print them out to a table:


$animals = array("Dogs", "Cats", "Monkeys", "Frogs", "Kangaroos");
?>

You can use the modulo operator % to determine wether a row is even or odd:

 for($i = 0; $i < count($animals); $i++): 
    if($i % 2 == 0)
    {
      $class = "even";
    }
    else
    {
      $class = "odd";
    }
  ?>
  echo$class;?>">
     endfor;?>

    echo $animals[$i];?>

Or if we use the handy ternary operator:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2==0) ? "even":"odd";?>">
       endfor;?>
  
            echo $animals[$i];?>
    
  
Or if you use the "altrow" instead of "even" and "odd":
 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2==0) ? '',' class="altrow"';?>>
       endfor;?>

           echo $animals[$i];?>

If you use classnames like “row_0″ and “row_1″ instead of even and odd it comes down to this:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2);?>">
       endfor;?>

        echo $animals[$i];?>

Instead of the modulo operator you can also use a simple bit operation like this:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i&1) ? 'odd','even';?>">
       endfor;?>

         echo $animals[$i];?>
    
  
 
If you don't need the row number ($i) you can also do something like this:
 $even = 0; 
  foreach($animals as $animal):
    $even = 1 - $even; ?>
    echo$even ? 'even','odd';?>">
       endfor;?>

       echo $animal;?>

There is another solution with PHPs next() and reset() functions:

 $classes = array("even", "odd");
  foreach($animals as $animal):
    $class = next($classes) or reset($classes); ?>
    echo$class;?>">
       endfor;?>

      echo $animal;?>

With this solution you can also use more than two different styles like this:

 
$colors = array("#f00", "#0f0", "#00f");
while(loopingThroughWhatever())
{
  $color = next($colors) or reset($colors);
  //use it somewhere
  echo $color;
}
?>

Or another simple example:


$class = "odd";
while(loopingThroughWhatever())
{
  $class = ($class == 'even') ? 'odd' : 'even';
}
?>

However I find it kind of annoying when I have to initalize $class evrytime. Well, if you don’t need both classes (even and odd) you can simply do something like this:


while(loopingThroughWhatever())
{
  $class = empty($class) ? 'odd' : '';
  //use it somewhere
  echo $class;
}
?>

With this last approach you can simplify things a lot. Take a look at this code generated by CakePHP’s bake generator:


$i = 0;
foreach ($animals as $animal):
        $class = null;
        if ($i++ % 2 == 0) {
                $class = ' class="altrow"';
        }
?>
 echo $class;?>>

This would become something like this:

 foreach($animals as $animal):?>
   echo $class = empty($class) ? ' class="altrow"' : '';?>>

(Note that there is a little difference in the behaviour of this two: The latter one adds the altrow class to the first, third, fifth, … row while the first one adds the altrow class to the second, fourth, …)

I know there are other solutions out there and you can easily combine different approaches (for example use if(){} instead of the ternary operator ?:, or create a function, use a switch, etc… )). So what do you use?

In my next posting I’ll take a look at how this is handled in Smarty, Zend Framework, Rails and in CakePHP – and I’ll come up with my own CakePHP-Helper to achieve Zebra Tables.

Functino » modulo

Zebra Tables: How to alternate table row colors

CSS only

Using PHP to add classes