Alternating Row Colors in HTML Tables Using PHP

We've all run into a situation where we have a good bit of data comprising a number of rows and wished there was a nice easy way to make the rows display using alternating colors. That's what this tutorial will do. You'd be surprised at how easy it really is.

For the purposes of this tutorial, we're going to use the following array as our data source to fill the tables.

$myArray = array("Dave","Bill","Brian","Mike","Jason","Eric","Phil","Ben","Chris","Larry");

This is going to be a simple example, but there's really no difference between having a single column vs. having multiple columns of data.

The next thing we need is a couter to keep track of the row number we are on. We'll use $i and initialize it to '1' outside of our loop.

Next we need to create a variable to hold the current row color. We'll use $rowColor. That's about it for the variables we're going to need, so let's start building our code.

<?php

$myArray = array("Dave","Bill","Brian","Mike","Jason","Eric","Phil","Ben","Chris","Larry"); # Our table fill data

$i = 1; # Our row counter
?>

<p>Here's our table with alternating row colors. The second column is the row 
   number for your reference.</p>

<table align="left" width="25%" cellpadding="3" cellspacing="0">

<?php

foreach ($myArray as $row)
{
  if ($i % 2 != 0) # An odd row
    $rowColor = "green";
  else # An even row
    $rowColor = "orange";
  
  echo '<tr bgcolor="' . $rowColor . '"><td align="left"><font color="white"><b>' . $row . '</b></font></td><td align="right"><font color="white"><b>' . $i . '</b></font></td></tr>' . "\r\n";
  $i++; # Increment our row counter
}

?>

</table>

Here's our table with alternating row colors. The second column is the row number for your reference.

So what exactly happened here? Well, we used a mathmatical function called Modulus which performs division but instead of returning the result of the division it returns the remainder. So 1 % 1 returns '0' because there is no remainder. 1 % 2 returns '5', 2 % 2 returns '0', 3 % 2 returns '5', 4 % 2 returns '0', etc. Since any even number will be evenly divisible by '2', the even rows will always fall in the else portion of our if statement.

In our code we used an if statement to test if the returned value was not equal to '0' and assigned one color to that condition, and assigned a different color if it was.

<?php
if ($i % 2 != "0") # An odd row
  $rowColor = "green";
else # An even row
  $rowColor = "orange"; 
?>

Well, that's how you do it. Pretty simple huh?

An even simpler way for just two alternating row colors:

The first example works great if you have more than just two row colors you want to use. For instance, if you wanted to do three row colors, you would just add another color and do a modulous by 3. If you only want to alternate back and forth between two row colors, you can get rid of the math modulus function altogether.

We're going to use the same array of names we used as the data in the first example, but now we're going to add another array to hold our two row colors.

<?php 
  $bgcolor = array(0=>"seagreen",1=>"slateblue"); 
?>

Next we'll use $a as our counter for alternating row colors. What we're going to be doing with $a is notting it. This means it'll flip back and forth between false (technically a zero) and one, which conveniently, is the array elements we used in our $bgcolor array. Here's the code which is very similar to the first example except $bgcolor[$a] and $a = !$a. The second column is the value of $a for your reference.

<?php
foreach ($myArray as $row)
{
  echo '<tr bgcolor="' . $bgcolor[$a] . '"><td align="left">
    <font color="white"><b>' . $row . '</b></font></td>
    <td align="right"><font color="white"><b>' . $a . '</b>
    </font></td></tr>' . "\r\n";
  $a = !$a; # flip the bit
}
?>