Categories: Software

So werden Tabellen mit CSS gestaltet

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

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

KI-gestütztes Programmieren bringt IT-Herausforderungen mit sich

OutSystems-Studie: 62 Prozent der Befragten haben Sicherheits- und Governance-Bedenken bei Softwareentwicklung mit KI-Unterstützung.

2 Tagen ago

Studie: Ein Drittel aller E-Mails an Unternehmen sind unerwünscht

Der Cybersecurity Report von Hornetsecurity stuft 2,3 Prozent der Inhalte gar als bösartig ein. Die…

6 Tagen ago

HubPhish: Phishing-Kampagne zielt auf europäische Unternehmen

Die Hintermänner haben es auf Zugangsdaten zu Microsoft Azure abgesehen. Die Kampagne ist bis mindestens…

6 Tagen ago

1. Januar 2025: Umstieg auf E-Rechnung im B2B-Geschäftsverkehr

Cloud-Plattform für elektronische Beschaffungsprozesse mit automatisierter Abwicklung elektronischer Rechnungen.

6 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Mindestens eine Schwachstelle erlaubt eine Remotecodeausführung. Dem Entdecker zahlt Google eine besonders hohe Belohnung von…

7 Tagen ago

Erreichbarkeit im Weihnachtsurlaub weiterhin hoch

Nur rund die Hälfte schaltet während der Feiertage komplett vom Job ab. Die anderen sind…

1 Woche ago