Now that you’ve got yourself a snazzy new mySQL back-ended page you might want to spruce it up a little with alternating row colors. This is fair enough, as they definitely make tables look a lot more interesting provided the colours work well with each other, but since I’m not here to explain colour relationships I’ll just use a series of different greys throughout my example code. This tutorial is not made for the average novice, and is probably placed closer to intermediate skill capability if you want to explore more advanced colour combinations. Just bear with me, though, and I will explain everything...

The Logic of Alternating Colors
For the rest of this tutorial we will assume that you already have a mySQL query named $query and a while/mysql_fetch_array named $row. Given these assumptions, the following process must be followed to output a correctly-formatted table:

Yes, it’s as easy as that! The hardest part is assigning a cell a value according to its position in the table. In this example we will use 3 cell colours: #CCCCCC, #B9B9B9 and#7F7F7F, all being different shades of grey. Cell values can be alternated with the use of a function, making the whole process automated. Here's an example of a suitable function, with a variable named $count passed into it every time.

<?
function processRow($count)
{
    switch($count){
           case 1:
                $color = “#CCCCCC”;
                break;
           case 2:
                $color = “#B9B9B9”;
                break;
           case 3:
                $color = “#7F7F7F”;
                break;
           default:
                $color = “#FFFFFF”;
}
return $color;
}
?>

Note: When adding cases to a switch command, do not add any values below the default CASE. The individually-defined CASE statements themselves do not have to be in any particular order, but make sure that you don't have any duplicates or things will go horridly wrong. And always add the break line at the end of your CASE statements (except for the default CASE, which doesn’t need it).

Ok, that’s the hard part out of the way (not too difficult was it?). Our function takes in a variable called $count and processes 4 different statements. If $count is equal to 1, it sets our variable $color to the lightest grey, if it has a value of 2, it sets $color to a middle grey and if its 3 it sets it to a dark grey. The final part of this switch() statement acts as an exception, and allocates a white value to $color if the value of $count does not match any of the hard-coded CASE values. The $color variable is then passed back out into our main script. For the sake of simplicity you should pop this function in a file named config.php, which will also contain all the mySQL connectivity and session starting functions that are necessary with all my tutorials.

A Colour Alternation Script
Now let’s write the main page. As described earlier, we need to start the table, fire off a query, display all the rows, then close the query and close the table. Nice and simple! Here's how I did it:

<?
include ‘config.php’;

//first step: start the table
echo ‘<table width="400" border="0" cellspacing="0" cellpadding="0">’;

//second step: start the query
$query = mysql_query(“SELECT OurColumn FROM OurTable”) or die(mysql_error());
while ($row=mysql_fetch_array($query)){

//now we’re inside the main processing loop, third step: display all the rows
$count = $count + 1;
// this is setting the variable that we will pass into processRow so that it can determine between each row and assign each a different colour, until it gets to 3, when it’s set to 1 again.

echo ‘
<tr>
<td bgcolor="’.echo processRow($count).’">’.$row[‘OurColumn’].’</td>
</tr>
’;

if($count == 3){
$count = 0;
}
// restarting the colour loop again, you can remove the above if statement if you want to have all of the rows below the 3 grey ones just plain white.

// fourth step: close the query
}

// fifth and final step: close the table
echo ‘</table>’;
?>

That wasn’t too difficult to understand, was it? You’ve just successfully written a small script to alternate row colours between different rows. There are, however, two logical routes to this script: In the first case, the row colours will loop through from light grey to darkish grey to darkest grey then repeat the cycle. You can, however, set the script up to display rows of the light, darkish, and dark grey and then set all remaining rows to white. If you want this second option, just remove the last if statement from the example script above, because this is the part which restarts the colour loops and keeps them alternating. The colours themselves can easily be modified by changing the hex codes in the our function processRow. The amount of colours can easily be modified too by simply defining new CASES and then changing the last IF statement on the main page to the new number of different colours in your set.

Of course, the table in our example was just for illustration purposes, and there is nothing stopping you from adding more columns into your table using the appropriate methods. There may be an issue with the way in which the function passes the data back to the main script to be used, but if you can't sort this out yourself and/or have any other problems with this tutorial please don’t hesitate to contact me via the BioRUST Creative Forums, or click my name below and click Private Message. You may have to register.


	Alternating Row Colors with MySQL Results Tutorial Author - Scrowler (http://forums.biorust.com/member.php?userid=66)