03.06.2010
Tabellen mit CSS formatieren
Tabellen gewinnen an Struktur und Übersichtlichkeit, wenn sie ansprechend formatiert sind. Natürlich lässt sich dies mit CSS recht einfach verwirklichen.
1. HTML-Code für Tabellen
Auf die HTML-Struktur einer Tabelle möchte ich an dieser Stelle nicht im Detail eingehen. Eine sehr ausführliche Anleitung hierzu findet ihr z.B. auf Friedels Home.
Üblicherweise hat ein HTML-Tabellencode folgende Struktur, die hier zu Demo-Zwecken mit einem Auszug aus der Preisliste meines Weinlieferanten gefüllt wurde:
<table>
<tr>
<th> Jahrgang </th>
<th> Weinsorte </th>
<th> l </th>
<th> Preis € </th>
</tr>
<tr>
<td> 2008 </td>
<td> Riesling trocken </td>
<td> 1,0 </td>
<td> 3,50 </td>
</tr>
<tr>
<td> 2007 </td>
<td> Grauburgunder Kabinett trocken </td>
<td> 0,75 </td>
<td> 4,20 </td>
</tr>
<tr>
<td> 2007 </td>
<td> Dornfelder lieblich </td>
<td> 0,75 </td>
<td> 4,60 </td>
</tr>
<tr>
<td> 2009 </td>
<td> Portugieser Weißherbst halbtrocken </td>
<td> 1,0 </td>
<td> 3,10 </td>
</tr>
</table>
Sehen wir uns das Ergebnis dieses Quellcodes in Demo 1 an: Die Tabellenstruktur ist bereits erkennbar, aber ansonsten sieht es noch recht dürftig aus.
2. Die Tabelle erhält Rahmen
Um den Inhalt der einzelnen Zellen besser zu erkennen, erhalten die Zellen und die Tabelle selbst einen Rahmen. Dies geschieht mit folgenden CSS-Angaben:
table, th, td {
border: 1px solid #040;
border-collapse: collapse;
}
Damit die Rahmen benachbarter Zellen nicht doppelt dargestellt werden, lassen wir sie mit der Angabe border-collapse: collapse; "zusammenfallen".
Das nun schon etwas ansprechendere Ergebnis sehen wir in Demo 2
3. Textformatierung
Sorgen wir nun dafür, dass wir eine entsprechende Schriftart und -größe verwenden, den Text zentrieren und ihm zu den Seitenrändern etwas Abstand verleihen. Dies können wir durch Ergänzung unserer bisherigen Angaben wie folgt erreichen:
table, th, td {
border: 1px solid #040;
border-collapse: collapse;
font-family: Verdana;
font-size: 1em;
text-align: center;
padding: 5px;
}
In unserer Demo 3 sieht das jetzt schon aufgeräumter aus.
4. Hintergrundfarben
Noch ansprechender und übersichtlicher wird die Tabelle, wenn wir den einzelnen Zeilen eine Hintergrundfarbe zuweisen.
Beginnen wir mit dem "Tabellenkopf", der eine etwas kräftigere Hintergrundfarbe erhalten soll. Ebenso wollen wir ihm noch eine besondere Schriftfarbe zuweisen. Wegen des dunklen Hintergrunds soll im Tabellenkpof die Rahmenfarbe weiß sein. Hierzu ergänzen wir den CSS-Code wie folgt:
th {
background-color: #040;
color: #fff;
border: 1px solid #fff;
}
Nach dem Tabellenkopf folgt der eigentliche Tabelleninhalt. Hier sollen sich die einzelnen Tabellenzeilen etwas voneinander abheben, indem sie unterschiedliche Hintergrundfarben erhalten. Die ungeraden Zeilen erhalten einen etwas helleren; die geraden Zeilen einen etwas dunkleren Hintergrund.
Wir bilden hierzu zwei unterschiedliche CSS-Klassen, z.B. "ungerade" und "gerade". Diese wiederum werden den ungeraden oder geraden Tabellenzeilen (tr) zugewiesen. Alle Zellen (td) innerhalb einer Zeile erhalten damit die entsprechende Hintergrundfarbe. Also definieren wir
.ungerade td {
background-color: #e6ffe6;
}
.gerade td {
background-color: #d1fad1;
}
Das allein reicht jedoch nicht aus, denn wir müssen den Tabellenzeilen ja noch mitteilen, dass sie "ungerade" oder "gerade" sind. Folglich muss ihnen im HTML-Quelltext noch die entsprechende Klasse zugewiesen werden:
<table>
<tr>
<th> Jahrgang </th>
<th> Weinsorte </th>
<th> l </th>
<th> Preis € </th>
</tr>
<tr class="ungerade" >
<td> 2008 </td>
<td> Riesling trocken </td>
<td> 1,0 </td>
<td> 3,50 </td>
</tr>
<tr class="gerade" >
<td> 2007 </td>
<td> Grauburgunder Kabinett trocken </td>
<td> 0,75 </td>
<td> 4,20 </td>
</tr>
<tr class="ungerade" >
<td> 2008 </td>
<td> Dornfelder lieblich </td>
<td> 0,75 </td>
<td> 4,60 </td>
</tr>
<tr class="gerade" >
<td> 2009 </td>
<td> Portugieser Weißherbst halbtrocken </td>
<td> 1,0 </td>
<td> 3,10 </td>
</tr>
</table>
Damit ist unsere CSS-formatierte Tabelle schon fertig, wie Demo 4 zeigt.
Mit weiteren Klassen könnt ihr nun je nach Beadarf noch einzelne Zellen individuell formatieren. Nehmen wir mal an, der "Dornfelder" sei ein besonders zu empfehlender Wein oder ein spezielles Angebot. Wir könnten die entsprechende Zelle durch Zuweisung einer eigenen Klasse also besonders hervorheben mit
td.angebot {
font-weight: bold;
background-color: #ffa042;
}
Im HTML-Teil weisen wir diese Klasse dann lediglich der entsprechenden Zelle zu mit
...
<tr>
<tr class="ungerade" >
<td> 2008 </td>
<td class="angebot"> Dornfelder lieblich </td>
<td> 0,75 </td>
<td> 4,60 </td>
</tr>
...
Das Ergebnis liefert uns die Demo 5.
Wie ihr seht, ist es recht einfach, eine unformatierte Tabelle zu "tunen". Experimentiert einfach mal nach euren persönlichen Bedürfnissen und ihr werdet sehen: Tabellen müssen nicht langweilig wirken. Aber aufgepasst: Bei zu viel Farbe und Schnickschnack geht schnell der Blick für den eigentlichen Inhalt verloren.