Zebra-Tabelle erstellen

Auf verschiedene Weise können Tabellen in abwechselnd gestreiften Farben eingerichtet werden. Ich zeige nachfolgend zwei Beispiele auf.

Variante 1: PHP

<style type="text/css">
.row0 {background-color: #f2f2f2;}    
.row1 {background-color: #ffffff;}
</style>

<?php $c = 0; ?>

<table>
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
    </tr>    
    <!-- Schleife Beginn -->
    <tr class="row<?php echo($c++ & 1 );?>">
        <td>Inhalt 1</td>
        <td>Inhalt 2</td>
    </tr>    
    <!-- Schleife Ende -->
</table>

Vorteil Die Zuordnung erfolgt über eine eindeutige Klasse: PHP wird serverseitig ausgeführt und die Darstellung der Tabelle funktioniert auch mit älteren Browsern. Nachteil Es wird PHP benötigt.

Variante 2: CSS

<style type="text/css">
tr:nth-child(even) {background-color: #f2f2f2;}
tr:nth-child(odd)  {background-color: #ffffff;}
</style>

<table>
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
    </tr>    
    <!-- Schleife Beginn -->
    <tr>
        <td>Inhalt 1</td>
        <td>Inhalt 2</td>
    </tr>    
    <!-- Schleife Ende -->
</table>

Vorteil
Es ist kein PHP nötig.

Nachteil
Die Ansprache von nth-child in CSS wird nicht von älteren Browsern unterstützt und wird ignoriert. Generell werden diese Pseudo-Klassen jedoch von den neueren Browsern völlig unterstützt (Firefox ab Version 3.5; IE ab Version 9; Opera ab Version 9.5 und Chrome ab Version 4).