7.1 Tag <caption>
Die Tags <caption>, <thead>, <tbody> und <tfoot> werden verwendet,
um die Strukturierung und semantische Auszeichnung von Tabellen in HTML zu verbessern. Sie helfen dabei, Daten zu organisieren
und machen Tabellen verständlicher und zugänglicher sowohl für Benutzer als auch für Suchmaschinen.
Tag <caption>
Das Tag <caption> wird verwendet, um einer Tabelle eine Überschrift hinzuzufügen. Es hilft, den Inhalt der Tabelle zu beschreiben
und macht sie verständlicher für Benutzer und zugänglicher für Suchmaschinen.
Syntax:
<table>
<caption>Tabellenüberschrift</caption>
<!-- Tabellensinhalt -->
</table>
Beispiel:
<table>
<caption>Tabellenüberschrift</caption>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Tag <thead>
Das Tag <thead> wird verwendet, um Kopfzeilenzeilen der Tabelle zu gruppieren. Es hilft dabei,
den Kopf der Tabelle logisch vom Hauptinhalt zu trennen.
Syntax:
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
</thead>
<!-- Tabellensinhalt -->
</table>
Beispiel:
<table>
<thead>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Tag <tbody>
Das Tag <tbody> wird verwendet, um den Hauptinhalt der Tabelle zu gruppieren. Es hilft dabei,
den Hauptinhalt von der Kopfzeile und dem „Fuß“ der Tabelle zu trennen.
Syntax:
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
</thead>
<tbody>
<!-- Tabellensinhalt -->
</tbody>
</table>
Beispiel:
<table>
<thead>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Tag <tfoot>
Das Tag <tfoot> wird verwendet, um Fußzeilenzeilen der Tabelle zu gruppieren. Es enthält
normalerweise zusammenfassende oder abschließende Informationen.
Syntax:
<table>
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
</thead>
<tbody>
<!-- Tabellensinhalt -->
</tbody>
<tfoot>
<tr>
<td>Ergebnis 1</td>
<td>Ergebnis 2</td>
</tr>
</tfoot>
</table>
Volles Beispiel:
<table>
<thead>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Durchschnittsnote</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Das ist wirklich einfach zu merken:
Erklärung der Tabellenstruktur
<table>: äußerer Container für die gesamte Tabelle<caption>: Tabellenüberschrift, die hilft, den Inhalt zu beschreiben<thead>: gruppiert die Kopfzeilenzeilen der Tabelle<tbody>: gruppiert den Hauptinhalt der Tabelle<tfoot>: gruppiert die Fußzeilenzeilen der Tabelle
Material festigen
Lass uns eine Tabelle mit allen gelernten Tags erstellen und sie stylen.
<table>
<caption>Prüfungsergebnisse</caption>
<thead>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Durchschnittsnote</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION