Keeping it Small and Simple

2007.06.02

Alternating row color in HTML/CSS (with PHP)

Filed under: CSS, HTML, PHP Programming — Lorenzo E. Danielsson @ 00:28

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.

Advertisements

14 Comments »

  1. 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

  2. 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

  3. Great solution! Very elegant… articles like this help students a lot. Thanks!

    Comment by Student — 2007.06.08 @ 18:20

  4. @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

  5. 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

  6. thanks for sharing but tr:hover cannot be used at IE.

    Comment by cloud — 2007.09.26 @ 09:09

  7. 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

  8. 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

  9. 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

  10. $rowclass = ($rowclass==’0′) ? 1 : 0;

    if else way of writing-
    $rowclass = 1 – $rowclass;

    just a suggestion.

    Comment by Joe — 2008.03.03 @ 18:05

  11. Sorry, that should be:

    $rowclass = ($rowclass==’0′) ? ‘1’ : ‘0’;

    I fat fingered it.

    Comment by Joe — 2008.03.03 @ 18:07

  12. @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

  13. 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

  14. Nice, thanks a lot…

    Comment by SPI — 2008.08.05 @ 09:47


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: