Hi,

In this tutorial we will show you how to show alternate colors between (table) rows. They are nice to use in a site’s design.

First let’s define each color:

<?php
// Define colors here

$color_one = '#FFFFFF';
$color_two = '#E6F2F7';

Let’s build our sample array.

$array = array('apple','pine','strawberry',
                    'pear','banana', 'cranberry','kiwifruit');

We will use a variable that will increment with each loop:

$i = 1; // starting value
?>

Let’s output our values in table rows:

<!-- Table with alternate colors -->
<table width="100%" cellspacing="0">

How we will determine which color to show for each row?

While looping trough the array, we will check if the variable $i is an either an odd or an even number. We will determine this by checking if ($i / 2) results in an integer. If it is, then $i is even ($color_one) . Otherwise, it is odd ($color_two).

<?php
foreach($array as $value)
{
/*
Check if ($i / 2) is an integer and determine which color to show.
We will divide the number by 2
*/

$color = (is_int($i / 2)) ? $color_one : $color_two;
?>

<tr>
<td bgcolor="<?=$color?>"><?=$value?></td>
</tr>

<?php
$i++; // Increment $i
}
?>

</table>

Here’s the complete code:

<?php
// Define colors here

$color_one = '#FFFFFF';
$color_two = '#BBCCED';

$array = array('apple','pine','strawberry',
                    'pear','banana', 'cranberry','kiwifruit');

$i = 1;

?>

<!-- Table with alternate colors -->

<table width="100%" cellspacing="0">
<?php
foreach($array as $value)
{
/*
Check if ($i / 2) is an integer and determine which color to show.
We will divide the number by 2
*/

$color = (is_int($i / 2)) ? $color_one : $color_two;
?>
<tr>
<td bgcolor="<?=$color?>"><?=$value?></td>
</tr>
<?php
$i++; // Increment $i
}
?>
</table>

The output will look like this:


You can use this in any loop (for, foreach, while). Make sure you have a variable that is incrementing with each row so you can determine the alternate color.