-Tag (auch bekannt als "Header"-Tag) wird verwendet, um Kopfzeilenzellen in HTML-Tabellen (
) zu erstellen. Diese Zellen enthalten in der Regel Beschriftungen oder Überschriften für die Daten in der Tabelle.
Zweck des
-Tags
Der
-Tag dient dazu, die Bedeutung der Spalten- oder Zeilenüberschriften in einer Tabelle hervorzuheben. Er ermöglicht es dir, diese Überschriften von den normalen Tabellendaten (in
-Tags) zu unterscheiden.
Syntax des
-Tags
Die Syntax des
-Tags lautet:
<th>Inhalt</th>
Der Inhalt des
-Tags kann Text, HTML-Elemente oder andere gültige Inhalte sein.
Unterschiede zum
-Tag
Der
-Tag sollte nicht mit dem
-Tag verwechselt werden, das zum Erstellen einer Tabellenzeile verwendet wird. Der
-Tag wird innerhalb einer
-Zeile verwendet, um Header-Zellen zu erstellen.
Verwendung des
-Tags in HTML-Tabellen
Der
-Tag (Table Header) wird verwendet, um Header-Zellen in HTML-Tabellen zu definieren. Header-Zellen enthalten typischerweise Titel oder Überschriften, die die Daten beschreiben, die in der entsprechenden Spalte oder Zeile angezeigt werden.
Erstellen von Tabellen-Headern
Um einen Tabellen-Header zu erstellen, verwendest du den
Um eine Header-Zelle mit einer bestimmten Zeile oder Spalte zu verknüpfen, verwende die folgenden Attribute:
headers: Verbindet die Header-Zelle mit einer oder mehreren Zellen, die sie beschreibt
scope: Gibt den Geltungsbereich der Header-Zelle an (z. B. "row", "col", "rowgroup", "colgroup")
Attribute des
-Tags
Der
-Tag verfügt über eine Reihe von Attributen, mit denen du sein Verhalten und Aussehen anpassen kannst:
scope
Das scope-Attribut gibt den Geltungsbereich von Kopfzeilenzeilen und Headern an. Es kann drei Werte annehmen:
row: Die Kopfzeile erstreckt sich über die aktuelle Zeile.
col: Die Kopfzeile erstreckt sich über die aktuelle Spalte.
colspan: Die Kopfzeile erstreckt sich über mehrere Spalten.
colspan
Das colspan-Attribut gibt die Anzahl der Spalten an, über die sich die Kopfzelle erstrecken soll. Dies ermöglicht es dir, Kopfzellen zu erstellen, die mehrere Spaltenüberschriften kombinieren.
rowspan
Das rowspan-Attribut gibt die Anzahl der Zeilen an, über die sich die Kopfzelle erstrecken soll. Dies ermöglicht es dir, Kopfzellen zu erstellen, die mehrere Zeilenüberschriften kombinieren.
id
Das id-Attribut gibt eine eindeutige ID für die Kopfzelle an. Diese ID kann verwendet werden, um die Kopfzelle mit CSS zu stylen oder sie in JavaScript zu referenzieren.
class
Das class-Attribut ermöglicht es dir, eine oder mehrere CSS-Klassen auf die Kopfzelle anzuwenden. Mit CSS kannst du dann das Aussehen und Verhalten der Kopfzelle anpassen.
style
Das style-Attribut ermöglicht es dir, benutzerdefinierte Inline-Stilregeln anzuwenden. Du kannst dieses Attribut verwenden, um das Aussehen und Verhalten der Kopfzelle auf granularer Ebene zu steuern.
abbr
Das abbr-Attribut gibt eine Kurzform oder Abkürzung für die Kopfzeile an. Dies ist nützlich für Headings, die abgekürzt oder unvollständig sein können.
-Tag vs.
-Tag
Beide
und
sind Tags in HTML-Tabellen, die aber unterschiedliche Funktionen erfüllen:
Funktion
: Steht für "table header cell" und wird zum Definieren von Kopfzeilenzellen in Tabellen verwendet.
: Steht für "table data cell" und wird zum Definieren von Datenzellen in Tabellen verwendet.
Position
: Erscheint immer in der ersten Zeile einer Tabelle und definiert die Kopfzeilen.
: Erscheint in allen anderen Zeilen und definiert die Dateninhalte.
Ausrichtung
: Standardmäßig linksbündig ausgerichtet.
: Standardmäßig linksbündig ausgerichtet, kann aber mit CSS rechts- oder zentriert ausgerichtet werden.
Hintergrund und Stil
: Kann über CSS einen anderen Hintergrund oder Stil haben als
.
: Muss nicht unbedingt einen anderen Hintergrund oder Stil haben als
, kann aber über CSS angepasst werden.
Semantik
: Semantisch wichtiger, da er die Kopfzeile definiert.
: Semantisch weniger wichtig, da er die Dateninhalte definiert.
Barrierefreiheit
: Die Verwendung von
für Kopfzeilen ist wichtig für die Barrierefreiheit. Es ermöglicht Screenreadern, den Tabellenaufbau zu verstehen und den Nutzern die Navigation zu erleichtern.
: Die Verwendung von
für Datenzellen gewährleistet die Barrierefreiheit und ermöglicht die Trennung von Kopfzeilen und Dateninhalten.
Zusammenfassung
Verwende
, um Kopfzeilen in Tabellen zu definieren, und
, um Dateninhalte in Tabellen zu definieren. Dies sorgt für eine ordnungsgemäße Struktur und Semantik, was sowohl für Nutzer als auch für Suchmaschinen von Vorteil ist.
Styling des
-Tags
Mithilfe von Styling kannst du das Aussehen deines
-Tags anpassen, um die Lesbarkeit deiner Tabellen zu verbessern und sie optisch ansprechender zu gestalten.
Schriftformatierung
Du kannst die Schriftgröße, -farbe und -schriftart deines
-Tags anpassen. Hier sind einige gängige CSS-Eigenschaften, die du verwenden kannst:
font-size: Legt die Schriftgröße fest.
color: Legt die Schriftfarbe fest.
font-family: Legt die Schriftart fest.
Hintergrundformatierung
Du kannst auch den Hintergrund deines
-Tags formatieren. Dies kann dir dabei helfen, wichtige Informationen hervorzuheben oder die Tabellenstruktur zu verdeutlichen:
background-color: Legt die Hintergrundfarbe fest.
background-image: Legt ein Hintergrundbild fest.
background-repeat: Legt die Wiederholung des Hintergrundbilds fest.
Rand und Abstand
Du kannst den Rand und Abstand um deinen
-Tags anpassen. Dies kann die Lesbarkeit verbessern und die Tabelle sauberer aussehen lassen:
margin: Legt den Rand um das Element fest.
padding: Legt den Abstand zwischen dem Inhalt und den Rändern fest.
-Tag mit einer Schriftgröße von 1,2rem, schwarzer Schriftfarbe, Arial-Schriftart, hellgrauem Hintergrund und einem Padding von 10 Pixeln erstellen.
Denke daran, dass du diese Stileffekte nach Bedarf anpassen kannst, um das Aussehen deiner Tabellen zu optimieren und sie an dein Website-Design anzupassen.
Barrierefreiheit und
-Tag
Der
-Tag spielt eine entscheidende Rolle bei der Barrierefreiheit von HTML-Tabellen. Hier sind einige wichtige Aspekte, die du beachten solltest:
Bedeutung für Screenreader
Für Screenreader, die von blinden oder sehbehinderten Menschen verwendet werden, ist es wichtig, den Tabellenheader (
) vom Tabellendatensatz (
) unterscheiden zu können. Screenreader lesen den Inhalt von Tabellenzeilen von links nach rechts vor, und die Header geben den Spaltenkontext an. Eine korrekte Verwendung des
-Tags hilft Screenreadern, Tabelleninhalte präzise und verständlich zu vermitteln.
Rollenattribute
ARIA-Rollenattribute können verwendet werden, um die Semantik des
-Tags weiter zu verdeutlichen. Die Rolle "columnheader" weist den Bereich eindeutig als Tabellenheader aus, was für Screenreader von Vorteil ist.
<th role="columnheader">Spaltenüberschrift</th>
Tastaturnavigation
Benutzer, die die Tastatur zur Navigation verwenden, sollten in der Lage sein, auf Tabellenheader zuzugreifen und zu ihnen zu navigieren. Du solltest sicherstellen, dass die Tabulatorreihenfolge korrekt eingestellt ist und dass die Header fokussierbar sind.
Kontrast und Farberkennung
Menschen mit eingeschränkter Farbwahrnehmung oder Farbenblindheit können Schwierigkeiten haben, Tabelleninhalte zu unterscheiden. Stelle einen ausreichenden Kontrast zwischen Header-Text und Hintergrundfarbe sicher. Verwende Farben, die leicht zu unterscheiden sind, und vermeide komplexe Farbschemata.
Tipps für die Barrierefreiheit
Verwende den
-Tag nur für echte Tabellenheader.
Füge ARIA-Rollenattribute hinzu, um die Semantik zu verbessern.
Stelle sicher, dass die Tabulatorreihenfolge korrekt ist.
Biete einen ausreichenden Farbkontrast zwischen Header-Text und Hintergrund.
Vermeide blinkenden oder flackernden Text in Tabellenheadern.
Tipps und Best Practices für
-Tags
Bei der Verwendung von
-Tags solltest du die folgenden Best Practices beachten:
Semantisch korrekt verwenden
Verwende den
-Tag ausschließlich, um Kopfzeilenzellen in HTML-Tabellen zu deklarieren. Vermeide es, ihn für andere Zwecke wie die Fettdarstellung von Text zu verwenden.
Bildschirmlesegeräte im Auge behalten
Denke daran, dass Bildschirmlesegeräte
-Tags als Tabellenüberschriften erkennen. Verwende sie daher so, dass sie für Benutzer mit eingeschränkter Sehkraft sinnvoll sind.
Kürzlich erstellen
Verwende den
-Tag immer gepaart mit dem öffnenden und schließenden Tag, auch wenn es in einigen Browsern ohne sie funktioniert.
Eindeutige Überschriften
Stelle sicher, dass die Überschriften in deinen
-Tags eindeutig sind und den Inhalt der entsprechenden Tabellenzeile genau beschreiben.
Stilkonsistenz
Verwende CSS, um einen konsistenten Stil für alle
-Tags in deiner Tabelle zu erstellen. Dies trägt zur visuellen Klarheit und Barrierefreiheit bei.
Richtige Ausrichtung
Verwende das Attribut align oder text-align, um die Ausrichtung des Texts in den
-Tags anzupassen. Dies kann hilfreich sein, um Tabellen sauber und leicht lesbar zu machen.
Begrenzter Einsatz
Setze
-Tags sparsam ein und beschränke dich auf die essentiellen Kopfzeileninformationen. Zu viele Überschriften können die Tabelle unübersichtlich und schwer zu verstehen machen.
