HTML lernen Teil 22: Verwenden von Thead-, Tbody- und Tfoot-Elementen in HTML-Tabellen
Zeilen in der Tabelle können geteilt werdenin Thead-Tabellen, Tfoot-Tabellen und Tbody-Tabellen, ausgedrückt mit Thead-, Tfoot- und Tbody-Elementen. Jeder Kopf, jeder Fuß und jeder Körper enthält eine Gruppe von Zeilen, und jede Gruppe enthält mindestens eine Zeile, die durch das <tr> -Element definiert ist.
Die Elemente <thead>, <tfoot> und <tbody> sind sehrnützlich beim Schreiben einer Tabelle, die lang und breit ist und mehr als eine Seite enthält, auf der auch jede der Seiten-, Kopf- und Fußtabellen geschrieben ist. Die Verwendung dieser drei Elemente hilft Ihnen dabei, die Tabelle mithilfe des CSS-Stils nach Ihren Wünschen anzuordnen, und hat keinen Einfluss auf das Layout einer Tabelle. Für weitere Details betrachten wir die folgende Erklärung:
Element des Kopfes
Das Thead-Element wird zum Gruppieren von Inhalten verwendetoder Inhalt, der sich oben (am Kopf) in einer Tabelle befindet. Das <thead> -Tag wird als untergeordnetes Element des <table> -Elements geschrieben. Dies bedeutet, dass es sich innerhalb des <table> -Elements nach den Elementen <caption> und <colgroup> oder vor <tfoot>, <tbody> und <tr> befindet.
In der Verwendung wird das Element <thead> zusammen mit dem Element <tbody> verwendet, das den Inhalt der Tabelle anzeigt, und <tfoot>, das den unteren Rand (die Füße) einer Tabelle anzeigt.
In HTML5 gibt es keine speziellen Attributekann für <thead> -Elemente verwendet werden, während es in HTML4.01 verschiedene Attribute gibt, nämlich align, bgcolor, char, charoff und valign. Diese Attribute sind jedoch veraltet und Sie sollten nur CSS verwenden, um das <thead> -Element festzulegen.
Tbody-Element
Das tbody-Element wird zum Gruppieren verwendetInhalt oder Inhalt, der sich in der Mitte (Hauptteil) einer Tabelle befindet. Das <tbody> -Tag muss enthalten sein, es sei denn, die Tabelle enthält nur eine Body-Tabelle und keine Kopf- oder Fußtabelle.
In der Verwendung wird das <tbody> -Element zusammen mit dem <thead> -Element verwendet, das die Oberseite (den Kopf) der Tabelle und <tfoot> die Unterseite (die Füße) einer Tabelle anzeigt.
In HTML5 gibt es keine speziellen Attributekann für <tbody> -Elemente verwendet werden, während es in HTML4.01 verschiedene Attribute gibt, nämlich align, bgcolor, char, charoff und valign. Diese Attribute sind jedoch veraltet und Sie sollten nur CSS verwenden, um das <tbody> -Element festzulegen.
Fußelement
Das tfoot-Element wird zum Gruppieren von Inhalten verwendetoder Inhalt am unteren Rand (Fuß) eines Tisches. In der Verwendung wird das <tfoot> -Element zusammen mit dem <tbody> -Element verwendet, das den Inhalt der Tabelle anzeigt, und dem <thead>, das den oberen (Kopf) einer Tabelle anzeigt. Das öffnende Tag <tfoot> ist enthalten, wenn die tfoot-Tabelle vorhanden ist und das schließende Tag <tfoot> ignoriert werden kann.
In HTML5 gibt es keine speziellen Attributekann für das <tfoot> -Element verwendet werden, während es in HTML4.01 verschiedene Attribute gibt, nämlich align, bgcolor, char, charoff und valign. Diese Attribute sind jedoch veraltet und Sie sollten nur CSS verwenden, um das <tbody> -Element festzulegen.
Die Sache, an die man sich erinnern sollte, ist, dass der Kopf, der Körper und der Fuß die gleiche Anzahl von Spalten enthalten muss. Das Folgende ist ein Beispiel für den Code zum Schreiben und Verwenden dieser drei Elemente in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Grup Baris di HTML</title>
<style type="text/css">
table,th, td {
border: 1px solid black;
border-collapse: collapse;
width: 20%; }
tfoot { border:3px solid red; }
</style>
</head>
<body>
<table>
<tfoot> <!-- Meskipun elemen tfoot diletakkan di paling depan, hasilnya di browser berada di paling bawah>
<tr>
<td>Rata-Rata</td>
<td>16</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>011402001</td>
<td>15</td>
</tr>
<tr>
<td>011402002</td>
<td>17</td>
</tr>
</tbody>
<thead>
<tr>
<th>NIM</th>
<th>Poin</th>
</tr>
</thead>
</table>
</body>
</html>Die Ergebnisse in einem Browser wie diesem:
Wie Sie dem obigen HTML-Code entnehmen können,Obwohl ich das tfoot-Element vorne platziert habe (nach dem öffnenden Tag <table>), werden die Ergebnisse im Browser unten angezeigt, da die Funktion dieses tfoot-Elements den Inhalt von Zellen oder den Inhalt unten in der Tabelle gruppiert. Ebenso mit dem Element head, das den Zelleninhalt am Anfang (Kopf) der Tabelle und dem Element tbody in der Mitte der Tabelle gruppiert.
Wie geht das? Verstehst du die Funktion dieser drei Elemente? Wenn Sie dies bereits verstanden haben, fahren Sie mit dem nächsten Material zur Verwendung der Tags col, colgroup und caption fort.
