Articles » Alternating Row Colors

Written by: Michael

This concept is used all over the internet. Almost every database driven website uses alternating row colors when displaying a list of records. You've seen it used, you like it, and now you want to do it yourself. But, you're not sure how to accomplish it. Well you've come to the right place. I'm going to discuss the basic idea behind achieving this and give some concrete examples demonstrating different ways to implement it.

First and foremost, we need a loop. For now, we'll just use a for loop.

<?php
  for ($k = 0; $k < 5; $k++)  {
    // Do something
  }
?>

Now we have some code that will execute 5 times. Let's say each execution of this code prints a row of data. We want the background color of the data to alternate between white and light grey. Therefore, we need to define our colors. One way to do that is through PHP:

<?php
$bg1 = "#ffffff"; // White
$bg2 = "#ededed"; // Light grey
?>

The other is through a style sheet (and is the preferred method). This is the method I will be using throughout this article.

Okay, so we have our colors. Now how do we get them to alternate? There's two main ways to accomplish this: using remainder division and using negation. First up, remainder division:

<?php
  for ($k = 0; $k < 5; $k++)  {
    if ($k % 2 == 1)    // L1: This is where the alternating row colors
      $class = "bg1";   //     takes place.
    else                //
      $class = "bg2";   //

    echo "<div class='".$class."'>Row ".$k."</div>";
  }
?>

Which will give us something like the image to the right. Pretty simple. If we wanted to have the first row white instead of grey, then all we would have to do is swap the colors in bg1 and bg2.

The 4 lines labeled L1 can be further condensed into one line using a ternary operator as demonstrated below. If you've never seen this operator before, check out Unary, Binary, and Ternary Operators for an explanation.

<?php
$class = ($k % 2 == 1) ? "bg1" : "bg2";
?>

The second way to accomplish this is negation. To do this, we first need a boolean variable. When that variable is true, then we will display bg1. When it's false, we'll display bg2. Each loop, we'll negate the boolean variable so it we will use the other color on the next iteration. Observe.

<?php
  $b = true;   // Boolean variable

  for ($k = 0; $k < 5; $k++)  {
    $class = ($b) ? "bg1" : "bg2";
    $b = !$b;   // Negate the boolean variable

    echo "<div class='".$class."'>Row ".$k."</div>";
  }
?>

You may ask: well, what about while loops? The negation example works great for while loops without any additional code needed. However, if you choose to use the remainder division technique, then you will need to add a counter variable as demonstrated below:

<?php
  $k = 0;   // Counter variable

  while ($k < 5)  {
    $class = ($k % 2 == 1) ? "bg1" : "bg2";
    $k++;

    echo "<div class='".$bg."'>Row ".$k."</div>";
  }
?>

You might be asking yourself: well, if there's two techniques, one has to be better, right? In most cases, that is true. However, in this situation, it really comes down to a matter of prerference. I thought that the remainder division method would be slower since the remainder calculation takes more steps than a simple negation. In order to know this for certain, I set up a little test on this server to see what would happen. I used the following 6 snippets in my testing with the results posted below the code.

<?php
  // TEST1: FOR - Control
  for ($k = 0; $k < 10000000; $k++)  {
    $class = (1) ? "bg1" : "bg2";
  }

  // TEST2: FOR - Remainder division
  for ($k = 0; $k < 10000000; $k++)  {
    $class = ($k % 2 == 1) ?"bg1" : "bg2";
  }

  // TEST3: FOR - Negation
  $b = true;
  for ($k = 0; $k < 10000000; $k++)  {
    $class = ($b) ? "bg1" : "bg2";
    $b = !$b;
  }

  // TEST4: WHILE - Control
  $k = 0;
  while ($k < 10000000)  {
    $class = (1) ? "bg1" : "bg2";
    $k++;
  }

  // TEST5: WHILE - Remainder division
  $k = 0;
  while ($k < 10000000)  {
    $class = ($k % 2 == 1) ?"bg1" : "bg2";
    $k++;
  }

  // TEST6: WHILE - Negation
  $k = 0;
  $b = true;
  while ($k < 10000000)  {
    $class = ($b) ? "bg1" : "bg2";
    $b = !$b;
    $k++;
  }
?>

Test	Type	Average Execution Time
TEST1	For - Control	7.36 seconds
TEST2	For - Remainder division	10.66 seconds
TEST3	For - Negation	12.74 seconds
TEST4	While - Control	7.20 seconds
TEST5	While - Remainder division	10.46 seconds
TEST6	While - Negation	12.19 seconds

That was definitely not what I expected. It looks like the remainder division is the faster of the two. It also appears that a while loop is the faster way loop through the same code. However, it must be noted that this was for 10 million iterations. If you were displaying that many rows in the browser window, you'd have alot more to worry about than which method was the faster way to choose the next row's background color. Furthermore, the difference in execution times on more reasonable sets of data is negligable at best. Therefore, I leave it up to you to decide which method you like best. Both will get the job done equally well.

I hope this has helped you understand the methodology behind alternating row colors. Please post your thoughts below and let me know what you thought of this article!

Comments

vamsi said on Feb 27, 2009 - 12:51 AM...

Nice Article. Please keep posting! Expecting more articles on mysqlstored procedures too. Let me bookmark u!

Articles » Alternating Row Colors

Comments

Post Your Comments