HTML-Tabellen gestalten per CSS

Tabellen sind in den letzten Jahren zwar etwas in Verruf gekommen, aber sie sind keineswegs böse. Im Gegenteil. Zur Darstellung von tabllarischen Daten sind sie die Idealbesetzung. Peter Müller zeigt, wie Sie mit CSS HTML-Tabellen gestalten. - Start unserer neuen Serie zu Webdesign mit CSS (zur "alten" Serie hier entlang)

In diesem Artikel gestalten Sie eine Songliste einer CD (Putumayo Cafe Sampler), indem Sie zunächst das HTML mit zusätzlichen Elementen und Attributen optimieren und anschließend die Tabelle per CSS übersichtlich formatieren.

Der Gesamteindruck der Tabelle wird ganz wesentlich von der Gestaltung der Zellen geprägt.

Die Spaltenüberschriften th und die normalen Tabellenzellen td bekommen ein bisschen padding, werden mit text-align:left linksbündig und vertical-align: top (mehr hierzu im Kapitel Tabellenformatierung unseres Einführungskurses CSS ...) nach oben ausgerichtet. Die Spaltenüberschriften th bekommen zusätzlich noch eine Textformatierung: