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
Die durchschnittliche Lösegeldzahlung liegt bei 2,5 Millionen Dollar. Acht Prozent der Befragten zählten 2023 mehr…
Eine neue Analyse der EU-Kommission sieht vor allem eine hohe Verbreitung von iPadOS bei Business-Nutzern.…
Das operative Ergebnis wächst um fast 6 Billionen Won auf 6,64 Billionen Won. Die Gewinne…
Ab Werk blockiert Chrome Cookies von Dritten nun frühestens ab Anfang 2025. Unter anderem gibt…
Die Vorfreude steigt, denn BAUMLINK wird als Partner und Aussteller bei der Tech Show 2024…
Nutzung einer unternehmenseigenen GPT-Umgebung für sicheren und datenschutzkonformen Zugriff.