Aufbau von Tabellen - Zeilen und Spalten

Tabellen bestehen aus Zeilen und Spalten, aus denen sich die Zellen der Tabelle ergeben. Dazu kommen logische Bereiche wie Tabellenkopf, Tabellenkörper und Tabellenfuß sowie Zellen, die Zeilen- oder Spaltenüberschriften darstellen. Diese Grundeigenschaften einer Tabelle lassen sich mit HTML abbilden. Eine einfache Tabelle besteht aus einer oder mehreren Zeilen...

Tabellen-Bereiche für Kopf und Fuß

Sie können eine Tabelle in einen Kopfbereich, einen oder mehrere Datenbereiche und einen Fußbereich aufteilen. Den Tabellenkopf leiten Sie mit <thead> ein (head = table head = Tabellenkopf). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich gehören sollen. Mit </thead> schließen Sie den Tabellenkopf ab...

Tabelle - Spalten und Spaltengruppen

Ebenso, wie Sie eine Tabelle horizontal in Tabellenkopf, Tabellenkörperbereiche und Tabellenfuß aufteilen können, können Sie auch Gruppen von Spalten und einzelne Spalten vordefinieren. Der Zweck ist auch in diesem Fall zunächst eine logische Strukturierung, auf die Sie dann mittels CSS Zugriff haben, um beispielsweise einzelne Spaltengruppen oder Spalten zu...

Tabellen-Titel mit caption gestalten

Sie können eine Tabelle mit einem Titelbereich versehen. Darin können Sie beispielsweise die Legende zur Tabelle notieren, also die Art, wie die Tabelle zu lesen und wie ihre Daten zu verstehen sind. Ein Titelbereich für die Tabellenbeschriftung bzw. die Legende zur Tabelle wird durch <caption> ... </caption> markiert. Wenn Sie dieses Element verwenden, muss es das erste...

Tabellenzellen mit colspan und rowspan

Durch das Attribut colspan erreichen Sie, dass sich eine Zelle über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen), so wie im obigen Beispiel 1. Im Attributwert geben Sie an, über wie viele Spalten inklusive der aktuellen Spalte sich die Zelle erstrecken soll. Mit dem Attribut rowspan erreichen Sie, dass sich eine Zelle in einer Spalte über mehrere Zeilen...

Tabellen-Text mit summary und details

Sie können einen zusammenfassenden Text für die Tabelle definieren, der sich speziell an nicht-visuelle Ausgabesysteme richtet. Ein Sprachausgabesystem könnte diesen Text als Einleitung zur Tabelle ausgeben. Mit dem Attribut summary können Sie im einleitenden <table>-Tag eine Zusammenfassung der Tabelle definieren (summary = Zusammenfassung)...

Tabellen-Überschrift mit abbr

In umfangreichen Tabellen, bei denen sich der Inhalt zwar aus der optischen Darstellung, nicht aber unbedingt aus den Kopfzellenüberschriften ergibt, können Sie für die Kopfzellen zu Spalten oder Zeilen eine zusätzliche Überschrift hinterlegen. Diese alternative Überschrift wird von grafischen Browsern ignoriert. Sie kann jedoch von Screenreadern herangezogen werden, um...

Kopfzellen-Tabelle mit id und scope

Für nicht-visuelle Ausgabemedien, etwa für Sprachausgabesysteme, können Sie bestimmen, dass bei der Ausgabe einer Datenzelle ein expliziter Bezug zu einer oder mehreren Kopfzellen hergestellt wird. Das System kann den Inhalt der Kopfzelle(n) dann bei der Datenzelle wiederholen. Dabei gibt es zwei Mögleichweiten: In Datenzellen auf Kopfzellen Bezug nehmen und In Kopfzellen...

Tabellenlayouts wie es mal war

Tabellen sind für tabellarische Daten oder zumindest für Anordnungen mit tabellarischem Charakter gedacht. Sie wurden in der Vergangenheit jedoch nicht immer dafür benutzt. Bevor CSS zum Mittel der Wahl wurde, um Website-Layouts zu erstellen, war es üblich, mit sogenannten Tabellenlayouts zu arbeiten. In den späten 90er Jahren sahen fast alle HTML-Dokumentkörper so...