Alternating Rows in PHP

Alternating rows, a.k.a. zebra striping is kind on the eyes. It allows the eye to easily follow rows in a table, or differentiate list items from each other. I see people asking how to do this all the time. And I’ve seen a lot of needlessly complex answers. This can be done in one line.

First, you have to decide what two CSS classes you are going to use for differentiation. You can go with two different classes, like even and odd. Or, you can add something to a class, like yourclass-even and yourclass-odd, where one part stays the same. Finally, you can add something to the name of one class, like yourclass yourclass-odd.

For yourclass-even and yourclass-odd, do the following:

$even_odd = ( '-odd' != $even_odd ) ? '-odd' : '-even';

For yourclass and yourclass-odd do the following:

$even_odd = ( '-odd' != $even_odd ) ? '-odd' : '';

These should go at the top of your foreach() or while() loop, but inside the loop. Then, when you need to print the class, print this:

class="yourclass<php echo $even_odd; ?>"

What’s your favorite way of doing this?

19 thoughts on “Alternating Rows in PHP

  1. Another idea might be to leave the default class on the tag pure and simply add the even or odd as an additional class. Like:

    class="myclass <?php echo $even_odd ?>"

    Then you can use class selectors to make logical sense of your styles:

    .myclass {font-size:80%; /*styles for every row*/}
    .odd {background-color:#eee;}
    .even {background-color:#ccc;}

    Or if you need more speicificity, use .myclass.odd and .myclass.even as CSS selectors.

  2. I like Owen’s solution, as you can then apply even/odd to any OL/UL element (or even posts from the Loop, if you’re feeling really crazy).

    ‘Course, that’s assuming you want uniform look n’ feel across different types of lists. If you want more specificity, I’d say either Mark’s or Owen’s ideas work well.

  3. Ryan says:

    Great technique. A lot leaner than the javascript I’ve seen. But of the many ways I’ve seen this done, all require you to add a class or id to the element (which currently isn’t available with WordPress’s default configuration of its WYSIWYG editor without doing it manually through the HTML button). Is there a way to make any ul or ol with in an element of a certain class or id (#content or.post for example) have this styling automatically? This would give auto styling to people who have no code writing experience. But anyway, great script, I enjoy your posts on WP.

  4. Another option is to use 1/0 instead of even/odd:
    Right before the loop:

    $oddeven = 0;

    Right after the loop:

    $oddeven = 1 - $oddeven;
    echo "".$row_content."\n";

    Not much code at all… it’s one of my favorites.
    I do like the odd/even method though… nice use of ternary operators, clean code.

  5. Hi all,
    Thanks for your one-line solution. It helped me a lot! Anyway, I wanted to color my links in my sidebar. And I had hard time finding correct foreach to put your code in. For future bloggers, here is my solution.

    In wp-includes/links.php, find the line 243 ( get_links function ) :

    $output .= ‘‘;

    Change it with those two lines :

    $even_odd = ( ‘-odd’ != $even_odd ) ? ‘-odd’ : ‘-even’;
    $output .= ‘
    ‘;

    Then, in your custom css file, add this line :
    .color-even {color: black}

  6. Hi Mark,
    As you will shorly realise, I am pretty useless with no PHP experienece. I have tried to follow instructions above (opting for Owen’s method in comment one).

    My code is
    —————————————————————————
    <div class=”myclass “>

    <h3 id=”post-”><a href=”” rel=”bookmark” title=”Permanent Link to “>

    ——————————————————————————

    That <div class=”myclass “> seems pretty wrong but I didn’t know where or how to include the
    class=”myclass ” instruction as suggested.

    my css is the same as Owen’s.

    If you could help ;)
    Tanks in advance

  7. oups… it looks like my code was cut off…

    I was basically trying to say that I didn’t know where to put the code within the loop (class=”myclass “)

  8. er0k says:

    Hi, nice little snippet. But you may want to add a @ to suppress the PHP notice, since the $even_odd var is not defined in the first iteration of the loop. ie:

    $even_odd = ( ‘-odd’ != @$even_odd ) ? ‘-odd’ : ”;

  9. Don’t use @ if you can help it. It’s slow and make debugging a pain. Instead, declare your variables.
    Another alternative which is a bit more powerful:

    foreach($rows as $i => $row){
    $even_odd = ($i % 2) ? ‘even’ : ‘odd’;

    // … rest of code …

    }

    Since you’re declaring the number of iterations, you can have a special class apply to every x number of rows.

    eg. To have a different class applied to every 10th row:
    $tenthRow = (($i+1) % 10) ? ” : ‘tenth-row’);

    That said, in terms of usability, there is no discernible advantage of using zebra-striped lists. They do look better though, IMO.

  10. Krazzer says:

    I used to use this alot, but now there is a far more elegant way to do this using jQuery:

    jQuery(“#table .row:odd”).addClass(“odd”);

  11. GZIP says:

    Thanks! I wanted to show a list of posts with the post image alternating from left to right for alternating lists, and just needed to assign a class to do it. I This is perfect, nice and simple. (There is a typo in your example – the fist ‘?’ is missing from the php statement – could confuse some newbs ;))

Comments are closed.