Gefällt dir dieser Artikel?

PHP: Tabelle mit unterschiedlich farbigen Zeilen

erschienen in der Kategorie Webdesign, am 28.09.2012
Schnatterente
Per Mail erreichte ich mich gestern die Frage (eines PHP/HTML-Anfängers), ob ich kurz erklären könnte, wie man es in PHP hinbekommt, dass eine Tabelle ausgegeben wird, deren Zeilen eine wechselnde Hintergrundfarbe haben.

Das ist ganz easy! Zuerst basteln wir uns die nötigen Zeilen CSS-Code, die wir brauchen, um eine schöne Tabelle bauen zu können. Damit wir unterschiedliche Hintergrundfarben in den einzelnen Tabellenzeilen erhalten und möglichst wenig Overhead erzeugen, legen wir die Klassen "farbe1" sowie "farbe2" an, in denen die gewünschten Farben (CSS Tag: background-color) festgelegt werden.
tr.farbe1{
background-color: green;
}

tr.farbe2{
background-color: greenyellow;
}


Damit die Tabelle, unabhängig von ihrer Hintergrundfarbe, auch sonst ein bisschen besser ausschaut, fügen wir der CSS Datei auch noch die folgenden Zeilen hinzu. Die Angabe border-collapse, welche sich auf die gesamte Tabele bezieht, sorgt dafür, dass zwischen den einzelnen Tabellenzellen (also ihren Rändern) keine Freiräume gelassen werden. Des Weiteren verpassen wir allen Tabellenzellen einen schwarzen, 1 Pixel dicken Rahmen (border) und sorgen mit dem padding dafür, dass die Schrift nicht direkt an diesem dranklebt. Für Zellen, die eine Tabellenüberschrift enthalten, legen wir noch eine zusätzliche Hintergrundfarbe und die Textfarbe Weiß fest.
table{
border-collapse: collapse;
}

td, th{
border: 1px solid black;
padding: 10px;
}

th{
background-color: darkgreen;
color: white;
}



Soweit zur Vorarbeit. Nun aber zur eigentlichen Frage: Wie schafft man es, eine Tabelle mit abwechselnden Hintergrundfarben zu erzeugen? Der grundlegende Gedanke ist ganz einfach. Wir erstellen uns eine Variable (boolean), deren Wert (true oder false) darüber entscheidet, welche Hintergrundfarbe die jeweilige Tabellenzeile bekommt. Hat die Variable, im folgenden Beispiel heißt sie "$farbwechsel", den Wert true, verpassen wir der Tabellenzeile die Klasse farbe1. Ist dies nicht der Fall, weisen wir ihr die Klasse farbe2 zu. In der Regel werden Tabellen dynamisch in einer Schleife (z.B. mit Daten aus einer Datenbank) gefüllt. Um den Farbwechsel zu erzeugen, brauchen wir also nur noch den Wert unserer Variable $farbwechsel in jedem Schleifendurchlauf negieren.
<?php
$farbwechsel = true;
?>

<table>
<tr><th>Bunte</th><th>Tabelle</th></tr>

<?php
for ($i=0; $i<10; $i++){

if ($farbwechsel){
echo "<tr class='farbe1'> <td></td> <td></td> </tr>";

} else{
echo "<tr class='farbe2'> <td></td> <td></td> </tr>";

}

$farbwechsel = !$farbwechsel;

}
?>

</table>

eine Tabelle mit mehreren, sich abwechselnden, Hintergrundfarben Das war auch schon die ganze Magie, die nötig ist, um eine Tabelle hübscher und übersichtlicher zu machen. Das Resultat seht ihr rechts.

Vielleicht mag sich mancher fragen, wie man denn vorgehen kann, wenn man mehr als zwei Hintergrundfarben für eine Tabelle verwenden möchte.
Auch das ist recht einfach. Natürlich können wir nicht mehr auf einen boolean zurückgreifen, da dieser ja nur zwei Werte annehmen kann. Aber ein einfacher Integer ist fähig dieses Problem zu lösen.
Wollen wir z.B. eine Tabelle erstellen, mit fünf, sich abwechselnden Hintergrundfarben, legen wir in der CSS Datei die fünf benötigten Klassen (farbe0 bis farbe4) an und ändern unseren PHP Code wie folgt ab:

eine sehr bunte Tabelle
<?php
$farbwechsel = 0;
?>

<table>
<tr><th>Noch bunter</th></tr>

<?php
for ($i=0; $i<10; $i++){

echo "<tr class='farbe".$farbwechsel."'>
<td></td> </tr>";
$farbwechsel = ($farbwechsel+1)%5;

}
?>

</table>


Das wär's dann wohl fürs Erste mit dem Anfängerkurs bunte Tabellen in PHP/HTML.
Grüße an Tobias, der die Frage gestellt. hat.

Geschnatter

4 Kommentare, selbst mitschnattern << < Seite 1/1 > >>
Tobias, am 28.09.2012 um 16:52 Uhr
Tausend Dank, auch für deine Email!
Peter, am 17.12.2012 um 06:14 Uhr
Danke, genau was ich gesucht hab.
Anonym, am 17.07.2013 um 12:04 Uhr
super erklärt. thx!
Anonym, am 29.01.2016 um 15:07 Uhr
Danke, aber schon viel Text. Oder? Weniger geht auch ;D