HTML/Tabellen

In diesem Kurs lernen Sie, wie Sie Tabellen mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können.

1. Aufbau einer Tabelle
   • Tabellenzeilen (table), (tr)
   • Kopf- (th) und Datenfelder (td)
   • thead, tbody und tfoot
2. Beschriftung
   • Tabellenüberschrift (caption)
   • Kurzinformation (abbr)
   • headers
   • scope
3. Spalten und Zellen verbinden
   • Spalten (col)
   • Spaltengruppen (colgroup)
   • Spalten überspannen (colspan)
   • Zeilen überspannen (rowspan)
     
     
4. Gestaltung mit CSS
   • Kopf- und Datenzellen gestalten
   • Zebrastreifen
   • Zeilenüberschriften
   • Zeilen bei :hover markieren
   • Tabelle mit festem Kopf
5. Responsive Gestaltung
   • Anpassung für breite Viewports
   • Anpassung für schmale Viewports
6. Hintergrund
7. table-layout – Breitenangaben mit der table-layout-Eigenschaft steuern
8. Gestaltung mit JavaScript
   • Spalten bei :hover markieren
     
     
     

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

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

• Tabelle im Zebralook
• Alternativen zu Tabellen

• JavaScript/Tutorials/Datensatzauswahl aus Tabelle
• JavaScript/Tutorials/Tabellen dynamisch sortieren
• JavaScript/Tutorials/Monatskalender
  (Tabellen dynamisch erzeugen)

Weblinks

• W3C: tabular data