Warum Styling mit CSS auch für Tabellen geeignet ist

In der traditionellen Implementierung von HTML-Tabellentags können diese als schlimmstes Beispiel für Stilformatierungen dienen, die in strukturelle Markups eingebettet sind. Das Ergebnis ist ein überhäuftes und sich ständig wiederholendes Markup, das nahezu den Content verdeckt. Der nachstehende Beispielcode produziert die in Abbildung A gezeigte, sehr einfache Tabelle.

Tabellengestaltung mit CSS

Die HTML-Tabellentags beinhalten eine ganze Reihe von Formatierungsattributen, was nicht bedeutet, dass man diese auch verwenden muss. Stattdessen kann man die gleichen CSS-Stylingmethoden für Tabellen einsetzen, die man auch sonst in den Webseiten verwendet. Im Grunde kann eine Tabelle wie ein div-Element formatiert werden. Auch Tabellenzellen können formatiert werden, als ob sie eingebettete div-Elemente oder Paragrafen wären.

Der nachstehende Beispielcode produziert die in Abbildung B gezeigte Tabelle. Das macht deutlich, wie man fast alle Formatierungsinformationen aus dem Seitenmarkup entfernen und in ein CSS-Stylesheet kopieren kann.

Zunächst die CSS-Styles: