Tabel zebra gestreept

Een tabel met zebra strepen:

Tabel-1

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.

Smarty Template Engine

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.


jQuery

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

JavaScript:

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

Border

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

Tabel-2

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');

Hover

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

Tabel-3

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?

David van der Tuijn
"Mijn naam is David van der Tuijn, als senior php developer bij Floro Webdevelopment B.V. werk ik samen met een projectleider, back-end developers, front-end developers en designers, op basis van een functioneel- (FO) en technisch ontwerp (TO), bouw ik webapplicaties die voldoen aan de nieuwste ontwikkelingen op internet gebied. Ik werk zelfstandig, weet hoe een architectuur opgezet moet worden en kan deze uitdragen in een multidisciplinair team. binnen een project adviseer ik over de juiste methoden en technieken. Ik ontwikkel en bewaak de kwaliteit van de development werkzaamheden in projecten en kan projecten binnen een afgegeven planning afronden."