Beginnen wir mit der Diskussion über Tabellen. Insbesondere werden wir die folgende Textorganisation untersuchen:

Tabellen

Tabellen in HTML werden verwendet, um Daten in Zeilen und Spalten anzuzeigen und bieten eine strukturierte Möglichkeit, Informationen zu organisieren.

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 sieht wie folgt aus.
Beispiel:

Im obigen Beispiel:

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

Obwohl wir hier mit Tabellen aufhören könnten, können wir ihre Semantik verbessern, um es Suchmaschinen zu erleichtern, ihren Inhalt zu verstehen.

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 sind;
• Jedes <th>-Tag repräsentiert eine Kopfzelle.

Tabellenkörper

Der tbody-Abschnitt sollte nach dem thead-Abschnitt kommen und alle Tabellendaten außer den Überschriften umfassen. Alle Elemente innerhalb des tbody bleiben gleich.
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.

2. Tabellenkopf

Das <thead>-Tag wird verwendet, um die Kopfzeilenzeilen der Tabelle zu gruppieren. Es enthält eine oder mehrere Zeilen (<tr>) von Kopfzellen (<th>), die die Spaltenüberschriften definieren.

3. Tabellenkörper

Das <tbody>-Tag wird verwendet, um die Hauptinhaltszeilen der Tabelle zu gruppieren. Es enthält eine oder mehrere Zeilen (<tr>) von Datenzellen (<td>), die den Hauptinhalt der Tabelle definieren.

4. Tabellenzeilen

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

5. Tabellenzellen

Das <td>-Tag repräsentiert eine Standard-Datenzelle innerhalb des Tabellenkörpers. Das <th>-Tag repräsentiert eine Kopfzelle innerhalb des Tabellenkopfes. Jede Zelle enthält den tatsächlichen Inhalt der Tabelle, wie Text, Bilder oder andere HTML-Elemente.

Video-Tutorial