How to Zebra Stripe a Table

A HTML table can be difficult to read, especially if there are hundreds of rows. Reading across a row can sometimes be a challenge. One way of making the table more legible is to alternate the background color of each row. By the way, the plugin used on this blog to display code uses zebra stripes. Zebra stripping can be done by toggling a variable and alternately displaying an odd or even CSS class as it goes through the loop.

The Code:

// set variable initially to "odd."
// loop 4 times for demo purposes.
// toggle CSS classes while in a loop.
$c = "odd";
$count = 0;
echo "<table>";
while ($count < 4) :
  if ($c == "even") : echo "<tr class='even'>"; $c="odd"; else : echo "<tr class='odd'>"; $c="even"; endif;
  echo "<td>Data</td>";
  echo "</tr>";
  $count++;
endwhile;
echo "</table>";

The Result:

<table>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
</table>

The Style:

.odd { background-color: #fff; }
.even { background-color: #eee; }

To see it in action, visit CodePad.

Subscribe Via Email