Das tfoot-Tag
Das Tag tfoot definiert den Fußbereich einer Tabelle.
Es wird verwendet, um Zeilen so zu gruppieren,
dass CSS-Stile sofort auf eine bestimmte Gruppe angewendet werden
können. Eine Tabelle kann nur ein einziges tfoot-Tag enthalten.
Das Tag tfoot wird oft zusammen mit
thead
und tbody
verwendet, um den Kopfbereich, den Hauptbereich
und den Fußbereich einer HTML-Tabelle zu definieren. Standardmäßig
platziert der Browser den Inhalt von tfoot
am unteren Ende der Tabelle und thead -
am oberen Ende.
Beispiel
Lassen Sie uns für die Gruppe von Zeilen, die durch das Tag
tfoot gruppiert sind, die Textfarbe Rot
mit der Eigenschaft color festlegen:
<table>
<thead>
<tr>
<th>Name</th>
<th>Nachname</th>
<th>Gehalt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Nachname1</td>
<td>200$</td>
</tr>
<tr>
<td>Name2</td>
<td>Nachname2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Anzahl: 2</td>
<td>-</td>
<td>Gesamt: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Beispiel
Und hier lassen Sie uns betrachten, thead
befindet sich nicht oben und tfoot nicht unten,
dennoch platziert der Browser sie an ihren
richtigen Stellen:
<table>
<tfoot>
<tr>
<td>Anzahl: 2</td>
<td>-</td>
<td>Gesamt: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Name1</td>
<td>Nachname1</td>
<td>200$</td>
</tr>
<tr>
<td>Name2</td>
<td>Nachname2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Name</th>
<th>Nachname</th>
<th>Gehalt</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
