You now can look in almost any website or web application where the background colors are alternating. This is a great (and easy) way to improve the user interface for the end users.

Here’s a quick explanation of what’s going on in the demo file below:

First we set the alternating backgrounds we want to use.

$bg1 = "#f5f5f5";
$bg2 = "#FFFFFF";


Then as we pass through a loop of some kind this code snip rotates the variable $bg to the background colors we set above:
$bg = ($i++ & 1) ? $bg1 : $bg2;

In the example files, we’ve added some javascript to the table
’s to add an additional hover effect as well as some styling to improve the look of the tables.

Demo | Source File

Comment if you have any questions or suggestions.