PHP tips. Zebra stripes.

[black-dog]

A number of web designers could make their lives a lot easier with some simple scripting. One such occasion is zebra stripes, ie using different colours for alternating rows in lists and tables.

Sure you can hard code these easily enough. The problem is that if a row is added or deleted, the rest of the list has to be reformatted. So save yourself some effort and let PHP do the work for you.

Start by making two classes for the alternating rows

<style type="text/css" >
.zebra2{
background-color:#ebb;
padding:2px;
font-family:"Trebuchet MS";
}
.zebra1{
background-color:#bbe;
padding:2px;
font-family:"Trebuchet MS";
}
</style>

I have this inline in the examples but it can be in the stylesheet if you like.

Then, instead of hard coding your list of items or table rows, add them to an array like so:

PHP Code:

<?php
$listitems=array(
"apples",
"bananas",
"oranges",
"lemons",
"pears"
);?>

Add or take away items from the list as you like, the zebra striping will take care of itself

Finally, enbed the following snippet of PHP in your html to output the zebra striped list items

PHP Code:

<?php
$count=0;
foreach($listitems as $item){
$style=($count%2>0)?"class='zebra1'":"class='zebra2'";
echo "<li $style>$item</li>\n";
$count++;
}
?>

Edit the 'echo' line to change this to a table row etc.

Example here http://www.4theweb.co.uk/php_tips/zebralist.php

Source: http://www.4theweb.co.uk/php_tips/zebralist.phps

[jon123]

much better and tidier than mine. I also count the amount of rows then change background colour if it divides by 2

PHP Code:

if ($row % 2) { 
    $colour= "#EBEBEB"; 
} 


PHP Code:

 echo"
<tr bgcolor=$colour>................................"; 


I did try and use 3 or 4 different colours by creating arrays and using in_array, but using more then 2 colours in table rows or divs never looks right to me