Grow your CSS skills. Land your dream job.

Last updated on:

PHP Zebra Striping a Table

Table row in a loop:

<!-- Before loop -->
<?php $c = 0; ?>

<!-- Start loop -->
<tr class="<?=($c++%2==1) ? 'odd' : 'even' ?>">
<!-- End loop -->


.even { background-color:#FFF; }
.odd { background-color:#666; }


  1. Permalink to comment#

    You can even replace “tr” with “div” and do it w/ classes!

  2. Permalink to comment#

    The only problem in this example is that it will give a notice for the undefined variable $c.

    What I usually do is first initialise the variable to 0 before the start of the loop. Then you won’t get the notice.

  3. Permalink to comment#

    When I insert this code, it renders it unuseable. Why would it work w/o but not with?

  4. Permalink to comment#

    The keyword “var” can only be used inside a class declaration.

    $c = 0;

    I think you confused it with the “var” keyword in JavaScript which initializes a variable.
    You can also use the bitwise & to get odd and even.


    <?php echo $c++&1 ? 'odd' : 'even'; ?>

    Your example also has the odd and even switched around. Odd numbers will have $c++%2==1, not even.

  5. Please can someone help?

    I put the code into the tr tag on this line and the whole page stops giving an error message with this line number. Also when I put the code into the line the remaining tags don’t work

    echo " \n£ $investment\n";

    Thanks in anticipation

  6. Artem
    Permalink to comment#

    Cant understand, how it works…

  7. Permalink to comment#

    Very handy and useful trick.

  8. Permalink to comment#

    what about using array?

    $class = array('even' => 'odd', 'odd' => 'even');
    $curr = 'even';

    <tr class="">

  9. Permalink to comment#

    sorry, forgot the code wrapper

    <tr class="”>

  10. Permalink to comment#

    hmm still not working using pre or even code wrapper

    anyway what i do is using $class[$curr] inside my loop

  11. jennifer
    Permalink to comment#

    Can use this after the “While function”…
    $bgcolor = ($bgcolor == “#ececec”) ? “#ffffff” : “#ececec”;
    print ”

  12. apad
    Permalink to comment#

    bucabay, your code works!

  13. Officer Rex N.Y.P.D
    Permalink to comment#

    zebra table

    .even { background-color:#FFF; }
    .odd { background-color:#666; }

    for($a = 1;$a<=10;$a++)
    echo "”;
    echo “”;
    echo “The no is $a”;

  14. newjumanji
    Permalink to comment#

    genius script!!! thank you!

  15. Permalink to comment#

    How do you maintain a consistent zebra pattern in a sortable PHP table?

  16. Dominor Novus
    Permalink to comment#

    Surprisingly simple. This works great. Thanks.

  17. Trambulhao
    Permalink to comment#

    $bool = true;

    for ($i = 1; $i <= 10; $i++) :
    echo ‘<span class=”‘ . (($bool) ? ‘odd’ : ‘even’) . ‘”>’ . $i. ‘</span>’;
    $bool = !$bool;

  18. Kowsick
    Permalink to comment#

    This code is suitable for me. but i don’t know how to insert the css & where i can insert

  19. DrewChambersDC
    Permalink to comment#

    Easy way to do it with JQuery

    $(document).ready(function() {
    $(“#tableid tr:even”).addClass(“stripe1″);
    $(“#tableid tr:odd”).addClass(“stripe2″);

    /* CSS
    ————- */
    .stripe1 { background-color: # }
    .stripe2 { background-color: # }

  20. Paul
    Permalink to comment#

    Thank you thank you thank you!

  21. Justin
    Permalink to comment#

    $class = "grey";
    $rowCount = count($rows);
    for ($i = 0; $i
    <tr class="” >Data; ?>

    I feel all code needs to be as readable as possible to eliminate as much need of inline comments as possible, even if the code may be slightly longer.

  22. Justin
    Permalink to comment#

    $class = "grey";
    $rowCount = count($rows);
    for ($i = 0; $i
    <tr class="” >

    For some reason my code was cut by the text parser. If this post doesn’t work, then I am sorry

  23. I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an impatience over that you wish be delivering the following.
    unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case
    you shield this increase.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".