Um diese Tabellen, die über den Browser ausgegeben werden dem Auge etwas angenehmer zu gestalten nutzte ich css, die Cascading Style Sheets. Diese bieten eine einfache, und vor allem elegante Möglichkeit um Html und Tabellen zu Formatieren.
Zuerst war klar, die Leserlichket wird durch eine Seriefenlose Schrift verbessert und die allgemeine Optik auch. Also ein css - file erstellt und mit dem * - Selektor eine Klasse gebaut. Dieser Selektor wählt alle Elemente der Seite aus. Hier das Ergebnis:
* {
font-family: "Arial" , sans-serif ;
}
so, das wäre geschafft. Nun muss noch dieser eklige Doppelrahmen fort. Das erledigt:
table {
table-layout:auto;
border-collapse:collapse;
border-color: white;
}
damit verschwinden die Ränder der Table und alles schrumpft etwas zusammen. Allerdings verlieren die Einträge auch an Struktur. Was steht denn nun in welcher Zeile? - Egal kümmern wir uns erst einmal um die Überschriften, also die Table Header:
th {
background-color: cc0033;
color: white
}
so. Nun haben wir einen guten Kontrast und die Farben sind ja die Gleichen wie bei DocCheck!
Ok, bleibt nur noch das Problem mit den schlecht leserlichen Zeilen. Auf Bus - und Zugfahrplänen sind die Zeilen oft in verschiedenen Farben dargestellt. Spart platz und sieht eigentlich ganz ok aus, aber wie macht man das mit PHP?
Der PHP code erzeugt das HTML dynamisch. so auch die zeilen der Tabelle. Natürlich wird nicht jede Zeile vorher Implementiert, also muss man es anders machen:
Zuerst 2 css Klassen Schreiben:
.row_0 {
background-color: #FFFFFF;
}
.row_1 {
background-color: #E1E8F1;
}
dann muss vor der Erzeugung der Tabelle noch etwas PHP-Code her:
$bg = 0;
if($it % 2 == 0){
$bg = 1;
}
else {
$bg = 0;
}
so, jetzt muss die Variable $it nach jeder geschriebenen Zeile inkrementiert werden!
$it++;
so. Nun nur noch die Tags angepasst:
echo "";
und schon werden die einzelnen Zeilen unterschiedlich eingefärbt!
Nun sind sie leserlich, platzsparend und sehen sogar noch schick aus.
