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
Check Point warnt vor offener Schwachstelle, die derzeit von Hackern für Phishing ausgenutzt wird.
Video-Babyphones sind ebenfalls betroffen. Cyberkriminelle nehmen vermehrt IoT-Hardware ins Visier.
Der Downloader hat hierzulande im April einen Anteil von 18,58 Prozent. Im Bereich Ransomware ist…
Unternehmen greifen von überall aus auf die Cloud und Applikationen zu. Dementsprechend reicht das Burg-Prinzip…
Hacker nutzen eine jetzt gepatchte Schwachstelle im Google-Browser bereits aktiv aus. Die neue Chrome-Version stopft…
Microsoft bietet seit Anfang der Woche einen Patch für die Lücke. Kaspersky-Forscher gehen davon aus,…