HTML <th>-Tag: Alles, was Sie wissen müssen

Der

Die Syntax des

<th>Inhalt</th>

Der Inhalt des

Unterschiede zum

Der

Erstellen von Tabellen-Headern

Um einen Tabellen-Header zu erstellen, verwendest du den

<table>
  <thead>
    <tr>
      <th>Spaltenüberschrift 1</th>
      <th>Spaltenüberschrift 2</th>
      <th>Spaltenüberschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zelleninhalt 1</td>
      <td>Zelleninhalt 2</td>
      <td>Zelleninhalt 3</td>
    </tr>
  </tbody>
</table>

Ausrichtung von Header-Zellen

Du kannst die Ausrichtung des Textes in Header-Zellen mit den folgenden Attributen steuern:

• align: Richtet den Text horizontal aus (z. B. "left", "center", "right")
• valign: Richtet den Text vertikal aus (z. B. "top", "middle", "bottom")

Zusammenfassen von Header-Zellen

Manchmal kann es notwendig sein, mehrere Header-Zellen in einer Spanne zusammenzufassen. Verwende hierzu die colspan-Attribute:

<tr>
  <th colspan="2">Übergreifender Tabellen-Header</th>
</tr>

Verschachtelte Header

Du kannst auch verschachtelte Tabellen-Header erstellen, indem du

<tr>
  <th>Haupt-Header</th>
  <th>
    Unterheader 1
    <th>Unterheader 1.1</th>
    <th>Unterheader 1.2</th>
  </th>
  <th>Unterheader 2</th>
</tr>

Scoping von Headern

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

Der

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.

Semantik

Mithilfe von Styling kannst du das Aussehen deines

Schriftformatierung

Du kannst die Schriftgröße, -farbe und -schriftart deines

• 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

• 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

• margin: Legt den Rand um das Element fest.
• padding: Legt den Abstand zwischen dem Inhalt und den Rändern fest.

Beispiel

Hier ist ein Beispiel für einen gestylten

th {
  font-size: 1.2rem;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #efefef;
  padding: 10px;
}

Dieser Code würde einen

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

Der

Bedeutung für Screenreader

Für Screenreader, die von blinden oder sehbehinderten Menschen verwendet werden, ist es wichtig, den Tabellenheader (

Rollenattribute

ARIA-Rollenattribute können verwendet werden, um die Semantik des

<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

Tipps und Best Practices für

Bei der Verwendung von

Semantisch korrekt verwenden

Verwende den

Bildschirmlesegeräte im Auge behalten

Denke daran, dass Bildschirmlesegeräte

Kürzlich erstellen

Verwende den

Eindeutige Überschriften

Stelle sicher, dass die Überschriften in deinen

Stilkonsistenz

Verwende CSS, um einen konsistenten Stil für alle

Richtige Ausrichtung

Verwende das Attribut align oder text-align, um die Ausrichtung des Texts in den

Begrenzter Einsatz

Setze