Beginnen wir mit einer Betrachtung von Tabellen. Im Besonderen wird die folgende Textorganisation analysiert:

Tabellen

Tabellen in HTML dienen der Darstellung von Daten in Zeilen und Spalten und bieten eine strukturierte Möglichkeit zur Organisation von Informationen.

Tabellen erstellen

Das <table>-Tag wird verwendet, um eine Tabelle in HTML zu erstellen. Tabellen bestehen aus Zeilen (<tr>) und Zellen (<td>), die die Struktur und den Inhalt der Tabelle definieren. Die grundlegende Tabellenstruktur ist wie folgt aufgebaut.
Beispiel:

Im obigen Beispiel:

• Das <table>-Tag wird verwendet, um eine Tabelle zu erstellen;
• Jedes <tr>-Tag stellt eine Zeile in der Tabelle dar;
• Innerhalb jeder Zeile repräsentieren <td>-Tags Zellen und definieren den Inhalt jeder Zelle.

Obwohl die Arbeit mit Tabellen hier beendet werden könnte, lässt sich ihre Semantik verbessern, um Suchmaschinen das Verständnis ihres Inhalts zu erleichtern.

Tabellenüberschriften

Das <th>-Tag definiert Tabellenüberschriften, die Spalten- oder Zeilenüberschriften darstellen. Es sollte im <thead>-Abschnitt einer Tabelle verwendet werden.
Beispiel:

Im obigen Beispiel:

• Der <thead>-Abschnitt enthält Tabellenkopfzellen, die mit dem <th>-Tag definiert werden;
• Jedes <th>-Tag stellt eine Kopfzelle dar.

Tabellenkörper

Der tbody-Abschnitt sollte nach dem thead-Abschnitt folgen und alle Tabellendaten außer den Überschriften umfassen. Alle Elemente innerhalb von tbody bleiben unverändert.
Beispiel:

Zusammenfassung

Tabellen sind mit einer Hierarchie von Elementen strukturiert:

1. Tabelle

Das <table>-Tag ist das übergeordnete Element, das die gesamte Tabelle definiert. Es enthält alle Zeilen und Spalten der Tabelle.

<table></table>

2. Tabellenkopf

Das <thead>-Tag dient zur Gruppierung der Kopfzeilen der Tabelle. Es enthält eine oder mehrere Zeilen (<tr>) mit Kopfzellen (<th>), die die Spaltenüberschriften definieren.

<table>
  <thead></thead>
</table>

3. Tabellenkörper

Das <tbody>-Tag dient zur Gruppierung der Hauptinhaltszeilen der Tabelle. Es enthält eine oder mehrere Zeilen (<tr>) mit Datenzellen (<td>), die den Hauptinhalt der Tabelle definieren.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Tabellenzeilen

Das <tr>-Tag stellt eine Zeile innerhalb der Tabelle dar. Es enthält eine oder mehrere Tabellenzellen (<td> oder <th>), die den Inhalt jeder Spalte innerhalb der Zeile definieren.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Tabellenzellen

Das <td>-Tag steht für eine Standard-Datenzelle im Tabellenkörper. Das <th>-Tag steht für eine Kopfzelle im Tabellenkopf. Jede Zelle enthält den eigentlichen Inhalt der Tabelle, wie Text, Bilder oder andere HTML-Elemente.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Video-Tutorial