HTML5-Handbuch - die neuen Features von HTML5

müssen Sie anstelle des Listenelements (
ul
oder
ol
) die enthaltenen
li
-Elemente formatieren, so wie im obigen Beispiel in der vierten Liste. Das ist natürlich auch mit Hilfe zentral notierter Selektoren möglich und so auf alle
li
-Elemente oder jene mit bestimmten Eigenschaften anwendbar. Das obige Beispiel nutzt die Inline-Formatierung mittels
style
-Attribut, um unterschiedliche Möglichkeiten zu demonstrieren.
14.9      Tabellenformatierung
    Für Tabellen gibt es einige spezielle CSS-Eigenschaften. Dennoch lassen sich natürlich auch andere Eigenschaften auf Tabellen, Spalten und Zeilen anwenden – egal ob Angaben zur Schriftformatierung, zu Ausrichtung, Innenabständen, Rahmen oder zur Hintergrundgestaltung ganzer Tabellen, einzelner Spalten, Zeilen oder Zellen. CSS-Eigenschaften sind auf alle Tabellenelemente anwendbar, also wahlweise auf die ganze Tabelle (
table
), auf einzelne Spaltengruppen und Spalten (
colgroup
und
col
), auf Tabellenkopfbereich, -fußbereich und -körper (
thead
,
tfoot
und
tbody
), auf Tabellenzeilen (
tr
), Kopf- und Datenzellen (
th
und
td
) sowie auf die Tabellenbeschriftung (
caption
).
14.9.1    Typische CSS-Formatierungen für Tabellen
    Zunächst soll ein allgemeines Beispiel zeigen, wie Sie HTML-Tabellen mit Hilfe von CSS typischerweise formatieren können.
Beispiel
    
    
    
    
    
    
    
    
    
     
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    Kleine Entfernungstabelle
    

	BCN	CAI	FRA	JFK	MOW	Summe
BCN		2900	1090	6150	3030	13170
CAI	2900		2910	9010	2900	17720
FRA	1090	2910		6180	2030	12210
JFK	6150	9010	6180		7500	28840
MOW	3030	2900	2030	7500		15460

    
    
    Bild 14.28: CSS-formatierte Tabelle
Erläuterung
    Das Beispiel zeigt ein vollständiges HTML-Dokument. Im Dokumentkopf werden in einem
style
-Bereich zentrale Formate für Tabellen (
table
) und Tabellenzellen (
th
und
td
) definiert.
    Das ist vor allem ein Rahmen für die Tabelle sowie für die einzelnen Tabellenzellen. Sowohl die Tabelle als auch die Kopf- und Datenzellen erhalten jeweils einen grauen, dünnen, durchgezogenen Rahmen (
border: 1px solid gray;
). Erkennbar ist, dass daraus im Browser sichtbar voneinander getrennte Rahmenlinien werden. Mit Hilfe der weiter unten beschriebenen Rahmenoptionen können Sie veranlassen, dass die Rahmen zwischen den Tabellenzellen und der äußere Tabellenrahmen zusammenfallen.
    Mit
padding:
3px;
erhalten die Tabellenzellen einen praxistypischen Innenabstand zwischen Zellrahmen und Zellinhalt. Die Angaben zu
font-family
und
font-size
regeln Schriftart und Schriftgröße von Zellinhalten.
    Mit der