I frequently get asked how to create an HTML in which the rows have alternating background color. Most of the people who ask me this are PHP programmers or at least striving to be, so I’m going to use PHP for the example, but the principle is of course valid regardless of implementation language.
First of all, create two CSS classes, row0 and row1. Set the background-color of each to be a different value. Here is an example:
.row0 {
background-color: #ffffff;
}
.row1 {
background-color: #f0f0f0;
}
You will probably be creating your table rows inside a loop of some form. You will need to have flag that will hold either 0 or 1, depending on the CSS class to use for the current table row. How do we make sure that the value is always 0 or 1? Simple. Assuming the name of our flag variable is $rowclass then we just do:
$rowclass = 1 - $rowclass;
Since this will evaluate to 0 if $rowclass is 1, or 1 if $rowclass is 0 it does exactly what we want. I think it is easier to understand how it works if you see it used. So take a look at the following:
<html>
<head>
<title>Table example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table>
<tr>
<th>Toon</th>
</tr>
<?php
$toons = array("Bugs Bunny", "Daffy Duck", "Tom Cat", "Jerry Mouse");
$rowclass = 0;
foreach ($toons as $toon) {
?>
<tr class="row<?= $rowclass ?>">
<td><?= $toon ?></td>
</tr>
<?php
$rowclass = 1 - $rowclass;
} ?>
This assumes that you called your stylesheet file style.css and placed it in the same directory as the php file. If you did that you should see a table with four rows, where rows one and three have a white background and rows two and four have a light gray background.
This simple example iterates through the array $toons, but you could do the same thing if your data is the result of a database query.
While we’re at it, I also get asked how to make the rows change background color when the mouse moves over them. That isn’t difficult either. Just add the following to your stylesheet:
.row0 {
background-color: #ffffff;
}
tr.row0:hover {
background-color: #ffff00;
}
.row1 {
background-color: #f0f0f0;
}
tr.row1:hover {
background-color: #ffff00;
}
Adding the :hover part specifies the style to apply when the mouse is over a table row. This is frequently used to style hyper-links, but it can be used for table rows as well.
Keeping it Small and Simple 
Thanks for the PHP solution. For those who need a JavaScript solution see
http://alistapart.com/articles/zebratables .
And with CSS3 things should get pretty straightforward: http://my.opera.com/dstorey/blog/striped-table
Comment by Raphael Wimmer — 2007.06.04 @ 07:42
And thank you for the links. I was not even aware of the fact that CSS3 supported things like :nth-of-type. Cool, indeed!
When we will see it supported in major browsers is another story.
Comment by Lorenzo E. Danielsson — 2007.06.04 @ 22:08
Great solution! Very elegant… articles like this help students a lot. Thanks!
Comment by Student — 2007.06.08 @ 18:20
@Student: thanks a lot. That is why I’m doing this, to help people out with simple solutions to simple problems. There are enough sites and blogs out there already who focus on more advanced things.
Comment by Lorenzo E. Danielsson — 2007.06.08 @ 19:23
This is both excellent and simple but it must also be pointed out that tr:hover is not supported in IE. If any solutions are available that don’t involve javascript i would be v.much interested!
Comment by Rad — 2007.08.03 @ 13:47
thanks for sharing but tr:hover cannot be used at IE.
Comment by cloud — 2007.09.26 @ 09:09
Hiya!
Oh man, you had to see my code before I stumbled on to your page! The basic principle was the same but I then juxtaposed variables and overridden them with names instead of just changing the god damned CSS class name!! lol ;P
BTW, there is a solution to the :hover problem can be solved with
http://www.xs4all.nl/~peterned/csshover.html
but it does use JS. Other than that we’ll have to wait for CSS3 I guess *getting gray and old*
Comment by SimpleAnecdote — 2007.11.20 @ 03:52
here’s a far less server intensive way of alternating row colors than any of the above:
// define the two bg colors
$bg1 = “#cccccc”;
$bg2 = “#444444”;
// put this inside the loop structure that goes through the rows.
$bg3 = $bg1;
$bg1 = $bg2;
$bg2 = $bg3;
Comment by marc — 2008.02.12 @ 21:58
oh, then obviously, just always use $bg1 in the loop, and everytime through the loop it will alternate.
Comment by marc — 2008.02.12 @ 21:58
$rowclass = ($rowclass==’0′) ? 1 : 0;
if else way of writing-
$rowclass = 1 – $rowclass;
just a suggestion.
Comment by Joe — 2008.03.03 @ 18:05
Sorry, that should be:
$rowclass = ($rowclass==’0′) ? ‘1’ : ‘0’;
I fat fingered it.
Comment by Joe — 2008.03.03 @ 18:07
@Joe: Sure, which ever works best for you. It’s quite possible that your idea is a bit more readable than mine, unless you are familiar with the 1-x idiom.
From a speed point of view, my version avoids a test, which might give it a slight edge. On the other hand, if speed was *that* important, we wouldn’t be using PHP..
Thanks for the suggestion. The more options the merrier! 🙂
Comment by Lorenzo E. Danielsson — 2008.03.03 @ 20:27
thanks for the short code! i used to have this long code just to do this alternating colors.
haha.. i guess i think too much.
Thanks again!
Comment by AzMean — 2008.03.11 @ 02:23
Nice, thanks a lot…
Comment by SPI — 2008.08.05 @ 09:47