HTML-Tabellen Grundlagen

Overview

Die Vorlesung behandelt die Erstellung und semantische Strukturierung von Tabellen in HTML, inklusive praktischer Tipps und Beispielen für den Quellcode.

Grundlagen von Tabellen in HTML

• Tabellen werden mit dem <table>-Tag erstellt, das den gesamten Tabelleninhalt umschließt.
• Eine Zeile wird mit <tr> (table row) eingefügt, Zellen innerhalb einer Zeile mit <td> (table data).
• Jede Zeile enthält so viele <td>-Elemente wie gewünschte Spalten.
• Ohne Zeilen und Zellen zeigt die Tabelle im Browser keinen sichtbaren Inhalt.

Praktische Erstellung einer Tabelle

• Datei mit der Endung .html anlegen, um Editor-Unterstützung zu erhalten.
• Tabellendaten strukturiert einfügen: Erste Zeile als Überschriften, weitere Zeilen als Datensätze (z.B. Fußball – Mannschaftssportart).
• Empfehlung: Oft speichern und im Browser prüfen, um Fehler frühzeitig zu erkennen.
• Fehler wie vergessene schließende Tags können die Darstellung stören.

Tabellenformatierung und -struktur

• Ein Rahmen um die Tabelle wird durch das Attribut border="1" am <table>-Tag hinzugefügt.
• HTML dient nur der Struktur, nicht der Formatierung; Formatierungen erfolgen idealerweise mit CSS.
• Seit HTML5 sind fast keine Formatierungsattribute mehr im <table>-Tag erlaubt, Ausnahme: border.

Semantische Strukturierung von Tabellen

• Spaltenüberschriften sollten als <th> (table header) deklariert werden, nicht als <td>.
• <th>-Zellen werden automatisch fett und zentriert dargestellt.
• Kopf-, Körper- und Fußbereiche einer Tabelle werden mit <thead>, <tbody> und <tfoot> getrennt.
• Diese Bereiche helfen dem Browser, Suchmaschinen und Screenreadern, die Tabelle korrekt zu interpretieren.
• Die Position von <thead> und <tfoot> im Quellcode spielt keine Rolle; Browser ordnet sie automatisch richtig an.

Zellen und Spalten überspannen (span)

• Das Attribut colspan in <th> oder <td> erlaubt das Überspannen mehrerer Spalten (z.B. colspan="5").
• Das Attribut rowspan erlaubt das Überspannen mehrerer Zeilen (z.B. rowspan="2").
• Wird ein Wert per rowspan oder colspan zusammengefasst, müssen die überschüssigen Zellen in den darunterliegenden Zeilen entfernt werden.
• Bei nachträglichen Strukturänderungen müssen die Anzahl der Spalten angepasst werden.

Beispiele für komplexe Tabellen

• Daten wie Kundengruppen können mit rowspan gruppiert werden, Überschriften mit colspan realisiert.
• Tabellen können beliebig verschachtelt und erweitert werden.

Key Terms & Definitions

• <table> — legt eine neue Tabelle an.
• <tr> — definiert eine Tabellenzeile.
• <td> — definiert eine Tabellenzelle (Datenfeld).
• <th> — definiert eine Tabellenzelle für Spaltenüberschriften.
• border — Attribut für die Tabellengrenze.
• <thead> — Kopfbereich einer Tabelle.
• <tbody> — Hauptinhaltsbereich einer Tabelle.
• <tfoot> — Fußbereich einer Tabelle.
• colspan — Attribut zum Überspannen mehrerer Spalten.
• rowspan — Attribut zum Überspannen mehrerer Zeilen.

Action Items / Next Steps

• Eigenständiges Anlegen und Strukturieren einer Tabelle in HTML üben.
• Praktisches Beispiel im nächsten Video anschauen.
• Aufgaben im Skript zum Thema Tabellen bearbeiten.