HTML - Überschriften & Bildunterschriften

Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Überschriften und Bildunterschriften ein. Als jemand, der dieses Fachgebiet seit Jahren unterrichtet, kann ich Ihnen sagen, dass das Beherrschen dieser Elemente Ihre Tabellen professionell und organisiert aussehen lassen wird. Also, los geht's!

Syntax

Bevor wir uns den Details widmen, sprechen wir über die Syntax, die wir verwenden werden. In HTML verwenden wir spezifische Tags, um Überschriften und Bildunterschriften für unsere Tabellen zu definieren. Hier ist eine kurze Übersicht:

Tag	Beschreibung
<thead>	Definiert eine Überschriftengruppe in einer Tabelle
<th>	Definiert eine Überschriftenzelle in einer Tabelle
<caption>	Gibt eine Bildunterschrift für eine Tabelle an

Machen Sie sich keine Sorgen, wenn das jetzt wie ein Alphabet-Soup aussieht. Wir werden es Stück für Stück auseinandernehmen, und bald werden Sie diese Tags wie ein Profi verwenden!

Beispiele für HTML-Überschriften und Bildunterschriften

Lassen Sie uns mit einem einfachen Beispiel beginnen, um zu sehen, wie diese Tags in der Praxis funktionieren.

<table>
<caption>Meine Lieblingsbücher</caption>
<thead>
<tr>
<th>Titel</th>
<th>Autor</th>
<th>Jahr</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</tbody>
</table>

Lassen Sie uns das auseinandernehmen:

1. Wir beginnen mit dem <table>-Tag, um unsere Tabelle zu erstellen.
2. Der <caption>-Tag gibt unserer Tabelle einen Titel: "Meine Lieblingsbücher".
3. Der <thead>-Bereich enthält unsere Kopfzeile.
4. Innerhalb von <thead> haben wir eine <tr> (Tabellenzeile) mit drei <th> (Tabellenkopf)-Zellen.
5. Der <tbody>-Bereich enthält unsere Datenzeilen, jede mit <td> (Tabellendaten)-Zellen.

Wenn diese Tabelle dargestellt wird, wird sie eine klare Kopfzeile mit fettgedrucktem Text haben, was es einfach macht, zu verstehen, was jede Spalte darstellt.

Kombination mit '' und ' '

Nun, lassen Sie uns einen Schritt weiter gehen und eine Fußzeile zu unserer Tabelle hinzufügen, indem wir den <tfoot>-Tag verwenden.

<table>
<caption>Buchverkäufe</caption>
<thead>
<tr>
<th>Titel</th>
<th>Autor</th>
<th>Verkäufe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Der Große Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25.000.000</td>
</tr>
<tr>
<td>Der Fänger im Roggen</td>
<td>J.D. Salinger</td>
<td>65.000.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Gesamtverkäufe:</th>
<td>90.000.000</td>
</tr>
</tfoot>
</table>

In diesem Beispiel:

1. Wir haben einen <tfoot>-Bereich nach dem <tbody> hinzugefügt.
2. Die Fußzeilenzeile verwendet <th colspan="2">, um eine Überschriftenzelle zu erstellen, die zwei Spalten spannt.
3. Dieletzte Zelle in der Fußzeile zeigt die Gesamtverkäufe an.

Diese Struktur hilft, den Hauptinhalt (<tbody>) von der Zusammenfassungsinfo (<tfoot>) zu trennen, was die Tabelle organisierter und leichter lesbar macht.

Unterschied zwischen und

Jetzt sehe ich oft, dass Schüler <thead> und <th> verwechseln, also lassen Sie uns das klären:

• <thead>: Dies ist ein Behälter für Header-Inhalte in Ihrer Tabelle. Es gruppiert Header-Informationen zusammen.
• <th>: Dies definiert eine individuelle Header-Zelle in Ihrer Tabelle.

Denken Sie daran, dass <thead> wie die Box ist, die alle Ihre Header-Informationen enthält, während <th> jede individuelle Bezeichnung innerhalb dieser Box ist.

Lassen Sie uns das in die Tat umsetzen:

<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
<th>Land</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Kanada</td>
</tr>
</tbody>
</table>

In diesem Beispiel:

1. Das <thead> umgibt die gesamte Kopfzeile.
2. Innerhalb von <thead> haben wir eine einzelne <tr> (Tabellenzeile).
3. Innerhalb dieser Zeile haben wir drei <th>-Zellen für unsere Spaltenüberschriften.

Erinnern Sie sich daran, dass Sie in Ihrem <thead> mehrere Zeilen haben können, wenn nötig, jede mit <th>-Zellen.

Zusammenfassend schauen wir uns eine Tabelle an, die alle Tags zusammenfasst, die wir gelernt haben:

Tag	Zweck	Beispiel
<table>	Erzeugt eine Tabelle	<table>...</table>
<caption>	Fügt eine Tabelle einen Titel hinzu	<caption>Meine Tabelle</caption>
<thead>	Gruppiert Header-Inhalte	<thead>...</thead>
<th>	Definiert eine Header-Zelle	<th>Spaltenname</th>
<tbody>	Gruppiert den Hauptinhalt	<tbody>...</tbody>
<tfoot>	Gruppiert Fußzeilen-Inhalte	<tfoot>...</tfoot>
<tr>	Erzeugt eine Tabellenzeile	<tr>...</tr>
<td>	Erzeugt eine Standarddaten-Zelle	<td>Daten</td>

Und das war's! Sie sind nun mit dem Wissen ausgestattet, um gut strukturierte, lesbare Tabellen in HTML zu erstellen. Denken Sie daran, Übung macht den Meister, also scheuen Sie sich nicht, mit diesen Tags zu experimentieren. Bereitwillig werden Sie bald Tabellen erstellen, die jeden Datenanalysten stolz machen würden!

Credits: Image by storyset