HTML-Tabellenüberschriften
Nach Tabellengrößen geht es um die Bedeutung der Labels: th, optional scope, und caption. Optik bleibt CSS; Bedeutung bleibt HTML.
Warum Überschriftenzellen nicht nur fettes td sind
Hilfstechnologien brauchen echtes th. Fettes td sieht ähnlich aus, trägt aber keine Header-Semantik.
Direkte Antwort
Beschriften Sie mit th. Nutzen Sie scope="col"/scope="row" bei Bedarf und <caption> für den Tabellentitel. Werte bleiben in td.
Spaltenüberschriften mit caption
Obere Header-Zeile mit th scope="col" plus caption.
Column headers and caption
html<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>
Beispiel Spalten lesen
- caption in table
- obere th mit scope=col
- Mengen in td
- gleiche Zellenzahl
Zeilenüberschriften für benannte Datensätze
Der Name einer Zeile wird th scope="row" — oft kombiniert mit Spaltenköpfen.
Row headers with a header row
html<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>
Beispiel Zeilen lesen
- oben scope=col
- Ada/Lin scope=row
- Punkte in td
Scope-Karte
Nachschlagehilfe für col/row/colgroup/rowgroup.
📊 scope attribute values
| Value | Typical use | Example cell |
|---|---|---|
| col | Header labels a column | Top “Qty” label |
| row | Header labels a row | Side “Ada” name |
| colgroup | Header for a group of columns | Advanced multi-header grids |
| rowgroup | Header for a group of rows | Advanced sectioned tables |
Für diesen Kurs zuerst col und row meistern.
Übung
- Club-Tabelle mit 3 Spalten
- caption
- th scope=col oben
- th scope=row für Namen
- kurz auf td zurück und Unterschied merken
Typische Fehler
- fettes td statt th
- caption außerhalb
- scope bei Mischgittern vergessen
- jede Zelle als th
Kurzfassung
- th = echte Header
- scope verbindet Spalte/Zeile
- caption betitelt die Tabelle
- Daten in td
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt