• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

How to Zebra Stripe a Table

September 18, 2016

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>";

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

<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; }

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

To see it in action, visit CodePad.

Filed Under: CSS, HTML, PHP Tagged With: table, zebra strip

Search This Website

Subscribe Via Email

  • Home
  • About
  • Archives

Copyright © 2023