HTML/Tabellen

In diesem Abschnitt werden die HTML-Elemente beschrieben, mit deren Hilfe Sie Tabellen mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können. Der Abschnitt besteht aus folgenden Seiten:

• Aufbau einer Tabelle
  • Tabellenzeilen (table), (tr)
  • Kopffelder (th)
  • Datenfelder (td)
  • Tabellenkopf (thead), Tabellenkörper (tbody) und Tabellenfuß (tfoot)

• Spalten gestalten
  • Spalten (col)
  • Spaltengruppen (colgroup)

• Zellen verbinden
  • Spalten überspannen (colspan)
  • Zeilen überspannen (rowspan)

• Tabellenbeschriftung
  • Tabellenüberschrift (caption)

• Tabellen und nicht-visuelle Medien
  • Zusammenfassung der Tabelle (summary)
  • Kurzinformation von Datenfeldern (abbr)
  • (headers)
  • Referenzen (scope)

Wann sollte man eine Tabelle verwenden?

Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden.

Sinnvolle Einsatzbereiche für Tabellen sind beispielsweise:

• Kalender
• Stundenpläne
• Fahrpläne
• Ranglisten, z.B. im Sport
• TV-Programm
• Statistiken

Oft kann man anstelle von Tabellen auch Listen oder ähnliches verwenden:

• Alternativen zu Tabellen

Siehe auch

• Tabellenformatierung mit CSS
  • Tabellenüberschriften (caption-side)
  • table-layout
  • Rahmen und Zwischenlinien
    • border-collapse
    • border-spacing
  • Umgang mit leeren Zellen (empty cells)

CSS/Tutorials:

• Tabellen responsiv gestalten
• Tabellen mit CSS gestalten
• Tabelle mit festem Kopf (position: sticky)
• Tabelle im Zebralook

• HTML/Tutorials/Alternativen zu Tabellen