phpBuddy

Folge phpBuddy.eu auf Twitter

Ab sofort können alle Twitter-Begeisterte sich auch über die Aktivitäten von phpBuddy.eu auf Twitter informieren. Ich werde dort in unregelmäßigen Abständen über neue Artikel, Tutorials, Kurztipps, lesenswerte Forumeinträge oder schlicht interessante PHP Funktionen informieren.

Sie sind hier: Startseite Wechselnde Hintergrundfarbe
Tabellenzeilen mit wechselnder Hintergrundfarbe

Tabellezeilen mit wechselnder Hintergrundfarbe zu erzeugen ist nicht schwer

Einer der Klassiker unter den Anfängerfragen ist, wie man eine Tabelle erzeugen kann bei die einzelnen Zeilen eine abwechselnde Hintergrundfarbe haben.
Um das zu erreichen braucht man eigentlich nicht mehr, als zwei CSS Klassen, die die Farbe bestimmen und einen PHP-Einzeiler. Es sei noch angemerkt, dass es verschiedene Lösungen, sprich Techniken, für dieses "Problem" der abwechselnden Farbe gibt. Ich beschränke mich hier nur auf eine, die auch am verständlichsten sein sollte.
Hier zunächst der komplette Quelltext des gesamten Dokuments, das aus XHTML, CSS und natürlich PHP besteht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>phpBuddy.eu - Tabellenzeilen mit wechselnden Hintergrundfarben</title>
<style type="text/css">
#tabelle { width: 400px; border: 1px solid #000000; margin: 0 auto; }
th       { border-bottom: 2px solid #000000; }
.trhd    { background: #FDE8D9; }
.weiss   { background: #FFFFFF; }
.grau    { background: #DFDFDF; }
</style>
</head>
 
<body>
<div id="tabelle">
<table width="400" cellpadding="0" cellspacing="0">
<tr class="trhd">
    <th align="center" width="20%">ID</th>
    <th width="40%" align="left">Name</th>
    <th width="40%" align="left">Beruf</th>
</tr>
 
<?php
 
$personen = array
(
    "Andreas"  => "Webentwickler",
    "Michael"  => "Schreiner",
    "Sabine"   => "Sekretärin",
    "Matthias" => "KFZ-Mechaniker",
    "Yvonne"   => "Einzelhandelskauffrau",
    "Jasmin"   => "Verkäuferin",
    "Peter"    => "Architekt"
);
 
foreach ($personen as $name => $beruf)
{
    echo $farbe = ($farbe == '<tr class="weiss">') ? '<tr class="grau">' : '<tr class="weiss">';
    echo "\n";
    echo '    <td align="center" width="20%">' . ++$i . '</td>' . "\n";
    echo '    <td width="40%">' . $name . '</td>' . "\n";
    echo '    <td width="40%">' . $beruf . '</td>' . "\n";
    echo '</tr>' . "\n";
}
 
?>
 
</table>
</div>
</body>
</html>

Der obere Teil ist der Head einer normalen HTML Datei. Im CSS Teil, der natürlich auch in eine externe Datei ausgelagert werden kann, wird das Aussehen der Seite und unserer Tabelle bestimmt. Dort sehen wir auch zwei CSS Klassen, die sich weiss und grau nennen. Diese beiden Klassen werden für die abwechselnde Farbe sorgen. Im Body öffnen wir die Tabelle und fügen den Tabellenkopf ein, anschließend befüllen wir die Tabelle mit Zeilen im PHP.

Zunächst wird ein Array mit Demo-Daten erzeugt, damit man auch etwas zum ausgeben hat. Statt dieser Array-Daten könnte man hier auch Datensätze aus einer Datenbankabfrage, XML Datei, o.ä. verwenden. In unserem Beispiel verwenden wir eine foreach-Schleife, aber der Schleifentyp ist unerheblich, weil es hier nur auf den Loop ankommt.
In der ersten Zeile in der Schleife passiert auch schon die ganze Magie:

echo $farbe = ($farbe == '<tr class="weiss">') ? '<tr class="grau">' : '<tr class="weiss">';

Dieses, für Anfänger häufig verwirrende, Konstrukt nennt sich Trinary Operator, auch bekannt als Dreifach-Operator oder Trinär-Operator und manchmal auch Ternär-Operator genannt. Es ist eine Kurzschreibweise für ein if-else Konstrukt. In unserem Fall allerdings für ein if-elseif.
Schreiben wir es mal voll aus, dann sollte die Funktionsweise selbsterklärend sein.

if ($farbe == '<tr class="weiss">')
{
    $farbe = '<tr class="grau">';
    echo $farbe;
}
elseif ($farbe == '<tr class="grau">')
{
    $farbe = '<tr class="weiss">';
    echo $farbe;
}

Hier geben wir den kompletten öffnenden tr-Tag, also die Tabellenzeile, inklusive CSS Klasse aus. Man könnte es auch etwas umschreiben, damit man nur den eigentlichen CSS Klassenname ausgibt. Der Rest der Schleife in der Datei gibt einfach nur die Daten in die Tabellenzellen aus.


Wie man sieht ist es ganz einfach eine Tabelle mit abwechselnder Hintergrundfarbe zu erzeugen.
Um sich das mal genauer anzuschauen zu können gibt es hier noch eine Live Demo - ein Blick in den Quelltext der Seite verdeutlicht das Ganze noch etwas.

Wechselnde Hintergrundfarbe (1 KB)
 

Interessante externe Links

Die beliebtesten Artikel

Die aktuellsten Artikel