CSS: The Definitive Guide, 5. Auflage

Kapitel 13. Tabellenlayout in CSS

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Du hast dir vielleicht den Titel dieses Kapitels angeschaut und dich gefragt: "Tabellenlayout? Ist das nicht so aus dem letzten Jahrtausend?" Das stimmt, aber in diesem Kapitel geht es nicht darum, Tabellen für das Layout zu verwenden. Stattdessen geht es um die Art und Weise, wie Tabellen mit CSS gestaltet werden, was viel komplizierter ist, als es auf den ersten Blick scheint.

Tabellen sind ungewöhnlich, verglichen mit dem Rest des Dokumentenlayouts. Bis Flexbox und Grid aufkamen, besaßen nur Tabellen die einzigartige Fähigkeit, Elementgrößen mit anderen Elementen zu verknüpfen - zum Beispiel haben alle Zellen in einer Zeile die gleiche Höhe, unabhängig davon, wie viel oder wie wenig Inhalt jede einzelne Zelle enthält. Das Gleiche gilt für die Breite von Zellen, die sich eine Spalte teilen. Zellen, die aneinander grenzen, können einen gemeinsamen Rahmen haben, selbst wenn die beiden Zellen sehr unterschiedliche Rahmenstile haben. Wie du sehen wirst, werden diese Fähigkeiten auf Kosten zahlreicher Verhaltensweisen und Regeln erkauft, die tief in der Vergangenheit des Internets verwurzelt sind und nur für Tabellen gelten.

Tabellenformatierung

Bevor wir uns darüber Gedanken machen können, wie Zellränder gezeichnet und Tabellen dimensioniert werden, müssen wir uns mit der grundlegenden Art und Weise befassen, wie ...