Php

Verschiedenfarbige Tabellenzeilen (Php Tutorial)

Tutorial erstellt von Tach44, letzte Änderung am 19.03.2008

Hier erst einmal ein Bild, wie die Tabelle später aussehen soll:

Erstellen des grundlegenden Scripts

Zuerst einmal brauchen wir ein Array, das wir auslesen wollen. In der Praxis stammt dies meist aus einer Datenbank oder Konfigurationsdatei, aber für dieses Tutorial erstellen wir einfach ein ganz simples Array zum Testen.

Code:
<?php
     $tabelle = array(1,2,3,4,5,6,7,8,9,0);
?>

Als nächstes geben wir die Tabelle aus, wobei wir eine foreach-Schleife zum Auslesen des Arrays verwenden:

Code:
<?php

$tabelle = array(1,2,3,4,5,6,7,8,9,0);

echo "<table style=\"width: 200px\">";

foreach ($tabelle as $tab)
{
     echo "<tr><td>".$tab."</td></tr>";
}

echo "</table>";

?>

Damit haben wir die Tabelle, welche jetzt allerdings noch unformatiert ist.
Formatierung

Zunächst fügen wir in unser Script die Variable $i ein, welche die Schleifendurchläufe zählen soll:

Code:
<?php

$tabelle = array(1,2,3,4,5,6,7,8,9,0);

echo "<table style=\"width: 200px\">";

$i = 0;

foreach ($tabelle as $tab)
{
     echo "<tr><td>".$tab."</td></tr>";
    $i++;
}

echo "</table>";

?>

Um jetzt dieses $i für die abwechselnde Hintergrundfarbe nutzen zu können, brauchen wir den Modulo-Operator %, welcher den ganzzahligen Rest bei der Division angibt. Wir teilen hier durch 2 und überprüfen, ob der Rest 0 ist. Dieser Rest kann ja beim Teilen durch 2 nur 1 (bei geraden) oder 0 sein (bei ungeraden Zahlen). $i % 2 ergibt  bei ungeradem $i den Wert 1 und bei geradem $i den Wert 0.

Code:
<?php

$tabelle = array(1,2,3,4,5,6,7,8,9,0);

echo "<table style=\"width: 200px\">";

$i = 0;

foreach ($tabelle as $tab)
{
     $farbe = ($i % 2 == 0) ? "#d0e3f5" : "#a8c4e0";
     echo "<tr><td style=\"background-color:".$farbe.";\">".$tab."</td></tr>";
     $i++;
}

echo "</table>";

?>

Der Ausdruck
Code:
($i % 2 == 0) ? "#d0e3f5" : "#a8c4e0"

ist von der Form (Bedingung)? a : b und bedeutet: Wenn die Bedingung wahr ist, ergibt der ganze Ausdruck a, sonst b. Bei geradem $i wird hier die erste Farbe gewählt (#d0e3f5), bei ungeradem die zweite (#a8c4e0). - Fertig ist unsere Tabelle.
Übrigens: Um z.B. nur jede fünfte Zeile einzufärben, rechnen wir einfach $i % 5 statt $i % 2.

Das war's auch schon! Ich hoffe es war halbwegs verständlich und danke für eure Aufmerksamkeit.

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2008           top ▲