So werden Tabellen mit CSS gestaltet

Cascading Style Sheets helfen, aus langweiligen Tabellen ansprechende Elemente für die Website zu bauen. Dieser Artikel erklärt die Grundlagen und den Umgang mit CSS und Tabellen - zum Beispiel Ausrichtung, Abstände und Füllungen.

In diesem letzten Teil einer dreiteiligen Artikelreihe wird erläutert, wie Tabellen mit CSS individuell gestaltet werden können. Beim ersten Teil ging es um das korrekte und barrierefreie Aufbauen von Tabellen. Der zweite Artikel beschäftigte sich mit der Gestaltung der Rahmen von Tabellen.

Wer mit CSS- und HTML-Elementen arbeitet, ist gut beraten, sich immer das Box-Modell vor Augen zu halten. Es bedeutet, dass für alle Elemente im Dokumentbaum in CSS rechteckige Kästen erzeugt werden. Jeder Kasten besitzt einen Inhaltsbereich sowie optional um diesen herum angeordnete Auffüllungen, Rahmen und Außenbegrenzungen.

Abstände

Auffüllbereiche und Außenbegrenzungen sind in HTML-Tabellen ganz leicht zu definieren, indem diese in den CSS-Regeln festlegt werden. Hauptproblem ist dabei der Umstand, dass die Außenbegrenzung nur für die Gesamttabelle und nicht für einzelne Zeilen, Spalten oder Zellen gilt.

Der HTML-Code in Listing A stellt eine Tabelle mit über CSS definierten Begrenzungen und Zellabständen dar. Die Eigenschaften von Auffüllbereich und Außenbegrenzung können dabei nach Belieben definiert werden (left, right, top und bottom), ebenso wie die Syntax im vorangehenden Beispiel, die eine Begrenzung für alle Seiten des Elements definiert.

Listing A



Listing B definiert separate Werte. Außerdem wird die Eigenschaft der Breite für die gesamte Tabelle angewandt. Auf diese Weise wird ganz einfach die Größe der Tabelle definiert.

Listing B



Themenseiten: Software, Webentwicklung

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

ZDNet für mobile Geräte
ZDNet-App für Android herunterladen Lesen Sie ZDNet-Artikel in Google Currents ZDNet-App für iOS

Artikel empfehlen:

Neueste Kommentare 

1 Kommentar zu So werden Tabellen mit CSS gestaltet

Kommentar hinzufügen
  • Am 7. November 2010 um 8:46 von logotoxic

    Nicht vorhandene CSS-Eigenschaft: horizontal-align: right;
    Die CSS-Eigenschaft horizontal-align: right; gibt es nicht. Der Autor meint sicher text-align:right;

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *