PHP: Tabellenzeilen abwechselnd mit PHP einfärben

Die Lesbarkeit und Übersichtlichkeit einer Tabelle erhöht sich um einiges, wenn das Auge leicht erfassen kann, was zu welcher Zeile gehört. Eine Möglichkeit dies zu erreichen, ist die Zeilen einer Tabelle abwechselnd in unterschiedlichen Farben einzufärben.

In diesem Tutorial möchte ich euch zeigen, wie man dies einfach mit der Hilfe von wenigen Zeilen PHP erreichen kann.

Der Code

In diesem Code lesen wir mit der Hilfe von MySQL einige Zeilen aus einer Datenbank aus und geben diese anschließend in Form einer Tabelle aus. Die Zeilen färben wir dabei abwechselnd einen:

$erg = mysqli_query($db, "SELECT id, vname, nname FROM tab");

echo '<table width="100%">';
echo '<tr style="font-weight:bold">';
echo '<td>ID</td><td>Vorname</td><td>Nachname</td>';
echo '</tr>';

$i = 1;

while (list($id, $vname, $nname) = mysqli_fetch_row($erg)) {			
   echo '<tr',($i%2==0?' style="background-color:#CCC"':''),'>';
   echo '<td>',$id,'</td><td>',$vname,'</td><td>',$nname,'</td>';
   echo '</tr>';	
   $i++;  
}

echo '</table>';

Wir bedienen uns dabei dem folgenden Trick: Wir setzen die Variable $i zunächst auf 1 und zählen $i dann nach jeder Ausgabe einer Zeile der Tabelle um einen Zähler hoch ($i++). Dadurch wissen wir folgendes: $i ist abwechselnd gerade oder ungerade, je nachdem in welcher Zeile wir uns gerade befinden.

Immer wenn $i gerade ist (also $i%2 ist 0), geben wir der Zeile eine Farbe - falls nicht, also wenn $i ungerade ist, lassen wir den Hintergrund so wie er ist. Die Einfärbung erreichen wir hier dadurch, dass wir wenn die Bedingung zutrifft den Style von tr auf "background-color: #CCC" (grau) setzen. Alternativ könnten wir natürlich auch eine Klasse zuweisen, deren Eigenschaften wir über CSS definiert haben.

Mit $i%2==0 trifft die Bedingung wie gesagt auf alle geraden Zeilennummern zu (2, 4, 6 und so weiter). Wenn wir stattdessen etwas mit den ungeraden Zeilen machen möchten, können wir stattdessen $i%2==1 oder $i%2!=0 verwenden.

Das Ergebnis

Das Ergebnis wird ungefähr so aussehen:

Die Alternative

Nicht jede Tabelle erstellen wir aus einer MySQL Tabelle, so dass wir diese auf die oben beschriebene Art und Weise mit der Hilfe von PHP erstellen und einfärben können. Manchmal haben wir auch statische Tabellen in HTML Dokumenten, die wir dennoch einfärben möchten.

In diesem Fall können wir uns der in diesem Tipp erklärten CSS Lösung bedienen, mit der man zentral aus einer CSS Style-Datei das Aussehen aller Tabellen auf einer Website steuern kann, ohne etwas an den Tabellen selbst zu verändern.

Natürlich kann man das Ergebnis dieser PHP Lösung auch durch die CSS Lösung erreichen, allerdings werden die dafür nötigen CSS Selektoren nicht von allen alten Browsern unterstützt.