Een tabel met zebra strepen:

HTML:

<style>
table { border: 1px solid #DDD; border-spacing: 0; }
tr.even { background-color: #FFF; }
tr.odd { background-color: #EFEFEF; }
td { padding: 5px 10px; }
</style>
<table>
  <tr><th>Stad</th><th>Inwoners</th></tr>
  <tr class="even"><td>Amsterdam</td><td>783.364</td></tr>
  <tr class="odd"><td>Breda</td><td>175.565</td></tr>
  <tr class="even"><td>Den Haag</td><td>496.745</td></tr>
  <tr class="odd"><td>Gouda</td><td>71.096</td></tr>
  <tr class="even"><td>Rotterdam</td><td>612.502</td></tr>
</table>

Ik zal je laten zien hoe ik het jaren heb gedaan met dynamische data:

PHP:

// Array als voorbeeld, kan ook een Database Result zijn.
$aData = array(
	array('stad' => 'Amsterdam', 'inwoners' => '783.364'),
	array('stad' => 'Breda', 'inwoners' => '175.56'),
	array('stad' => 'Den Haag', 'inwoners' => '496.745'),
	array('stad' => 'Gouda', 'inwoners' => '71.096'),
	array('stad' => 'Rotterdam', 'inwoners' => '612.502')
);
$i=0;
foreach($aData as $data){
  echo '<tr class="' . ($i % 2 ? 'odd' : 'even') . '"><td>' . $data['stad'] . '</td><td>' . $data['inwoners'] . '</td></tr>';
  $i++;
}

OF

PHP:

<?php $i=0; ?>
<?php foreach($aData as $data) { ?>
<tr class="<?php echo ($i % 2 ? 'odd' : 'even'); ?>">
  <td><?php echo $data['stad']; ?></td>
  <td><?php echo $data['inwoners']; ?></td>
</tr>
<?php $i++; ?>
<?php } ?>

Nadelen:

• Er moet extra PHP code worden toegevoegd in de template;
• Er moet een Iterator $1 (teller) worden gebruikt;
• Er wordt per item een if-else statement uitgevoerd.

Op een gegeven moment ben ik Smarty Templates gaan gebruiken:

HTML:

{foreach from=$aData name=data item=data}
<tr>
  <td class="{cycle values="even,odd" advance=false}">{$data.plaats}</td>
  <td class="{cycle values="even,odd"}">{$data.aantal}</td>
</tr>
{/foreach}

Let op: dat het laatste TD -element geen advance=false krijgt.

Nu wordt het leuk... met de introductie van jQuery kunnen we het volgende doen:

JavaScript:

$('td:even').addClass('even');
$('td:odd').addClass('odd');

We kunnen het nog mooier maken door elke rij van een CSS border-style te voorzien:

CSS:

td.border { border-bottom: 1px solid #DDD; }

PHP:

<td <?php if ($i < count($aData)-1) echo 'class="border"'; ?>></td>

Smarty:

<td {if not $smarty.foreach.data.last}class="border"{/if}></td>

Helaas ondersteund een TR -element geen border-style, anders zou de volgende oplossing ideaal zijn:

JavaScript:

$('tr:not(:last)').addClass('border');

Als laatst willen dat de rij oplicht als de cursor er overheen gaat:

CSS:

tr.hover { background-color: #FFFBBA !important; }

JavaScript:

$('tr').hover(function(){
  $(this).addClass('hover');
},
function(){
  $(this).removeClass('hover');
});

Meer informatie: A List Apart: Articles: Zebra Striping: More Data for the Case | A List Apart: Articles: Zebra Striping: Does it Really Help?