HTML - Überschriften und Beschriftungen

Tabellenkopfzeilen definieren

In HTML-Tabellen beschriften Kopfzeilen Spalten oder Zeilen mit Daten. Um eine Tabellenkopfzeile zu definieren, verwendet man das <th>-Tag. Das <th>-Tag wird innerhalb des <tr>-Tags (Tabellenzeile) platziert, ähnlich wie normale Tabellenzellen (<td>). Der Hauptunterschied zwischen <th> und <td>-Tags besteht darin, dass <th> für Kopfzellen verwendet wird, die standardmäßig meist eine fette Schriftart und zentrierte Textausrichtung haben.

<table>
  <tr>
    <th>Kopfzeile 1</th>
    <th>Kopfzeile 2</th>
    <th>Kopfzeile 3</th>
  </tr>
  <tr>
    <td>Daten 1</td>
    <td>Daten 2</td>
    <td>Daten 3</td>
  </tr>
</table>

Die erste Zeile enthält drei <th>-Tags, die die Kopfzeilen für jede Spalte definieren. Die zweite Zeile enthält normale <td>-Tags mit den eigentlichen Daten.

Attribute für Tabellenkopfzeilen

Tabellenkopfzeilen haben einige spezielle Attribute, die zur Verbesserung der Struktur und Barrierefreiheit der Tabelle verwendet werden können:

1. colspan: Das colspan-Attribut ermöglicht es einer Kopfzelle, sich über mehrere Spalten zu erstrecken. Zum Beispiel würde <th colspan="2">Kopfzeile</th> eine Kopfzelle erstellen, die sich über zwei Spalten erstreckt.

2. rowspan: Das rowspan-Attribut ermöglicht es einer Kopfzelle, sich über mehrere Zeilen zu erstrecken. Zum Beispiel würde <th rowspan="3">Kopfzeile</th> eine Kopfzelle erstellen, die sich über drei Zeilen erstreckt.

3. scope: Das scope-Attribut wird verwendet, um eine Kopfzelle mit den Datenzellen zu verknüpfen, die sie beschreibt. Dies ist wichtig für die Barrierefreiheit, da es Screenreadern hilft, die Beziehung zwischen Kopfzeilen und Daten zu verstehen. Das scope-Attribut kann folgende Werte haben:

   • row: Die Kopfzeile gilt für die Zeile.
   • col: Die Kopfzeile gilt für die Spalte.
   • rowgroup: Die Kopfzeile gilt für eine Gruppe von Zeilen.
   • colgroup: Die Kopfzeile gilt für eine Gruppe von Spalten.

<table>
  <tr>
    <th colspan="2">Kopfzeile 1 & 2</th>
    <th>Kopfzeile 3</th>
  </tr>
  <tr>
    <th rowspan="2" scope="row">Kopfzeile 4</th>
    <td>Daten 1</td>
    <td>Daten 2</td>
  </tr>
  <tr>
    <td>Daten 3</td>
    <td>Daten 4</td>
  </tr>
</table>

Die erste Kopfzelle erstreckt sich über zwei Spalten mit colspan, die vierte Kopfzelle erstreckt sich über zwei Zeilen mit rowspan, und das scope-Attribut wird verwendet, um anzuzeigen, dass die vierte Kopfzeile für die Zeile gilt.

Die Verwendung von Tabellenkopfzeilen mit passenden Attributen hilft, gut strukturierte und barrierefreie Tabellen in HTML zu erstellen.

Eine Beschriftung zu einer Tabelle hinzufügen

Eine Tabellenbeschriftung ist eine kurze Beschreibung des Inhalts oder Zwecks der Tabelle. Um einer HTML-Tabelle eine Beschriftung hinzuzufügen, verwenden Sie das <caption>-Tag. Das <caption>-Tag sollte direkt nach dem öffnenden <table>-Tag platziert werden, vor allen <tr>, <th> oder <td>-Elementen.

<table>
  <caption>Mitarbeiter-Gehaltsdaten</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Gehalt</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Manager</td>
    <td>$80,000</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Entwickler</td>
    <td>$75,000</td>
  </tr>
</table>

Styling von Tabellenbeschriftungen

Standardmäßig werden Tabellenbeschriftungen über der Tabelle und zentriert angezeigt. Sie können jedoch CSS verwenden, um die Beschriftung nach Bedarf zu gestalten und zu positionieren.

Um eine Tabellenbeschriftung zu gestalten, zielen Sie in Ihrem CSS auf das <caption>-Element:

table caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

Um die Beschriftung unter der Tabelle statt darüber zu positionieren, verwenden Sie die CSS-Eigenschaft caption-side:

table caption {
  caption-side: bottom;
}

Die Eigenschaft caption-side akzeptiert zwei Werte: top (Standard) und bottom.

Durch die Verwendung des <caption>-Tags und dessen Gestaltung mit CSS können Sie eine klare und ansprechende Beschreibung für Ihre HTML-Tabellen bereitstellen.