Učíme sa HTML časť 22: Použitie prvkov Thead, Tbody a Tfoot v tabuľkách HTML
Riadky v tabuľke je možné rozdeliťdo tabuliek theadov, tfoot stolov a tabuliek tbody vyjadrených prvkami thead, tfoot a tbody. Každá krieda, tfoot a telo obsahuje skupinu riadkov a každá skupina obsahuje najmenej jeden riadok definovaný elementom <tr>.
Prvky <thead>, <tfoot> a <tbody> budú veľmiužitočné pri písaní tabuľky, ktorá je dlhá, široká a má viac ako jednu stránku, na ktorej sú napísané aj všetky strany, tabuľky hláv a chodidiel. Použitie týchto troch prvkov vám pomôže usporiadať tabuľku podľa vášho želania pomocou štýlu CSS a neovplyvní rozloženie tabuľky. Pre viac podrobností zvážme nižšie uvedené vysvetlenie:
Prvok kriedy
Element Thead sa používa na zoskupenie obsahualebo obsah, ktorý je v hornej časti tabuľky. Značka <thead> je napísaná ako podradený element elementu <table>, čo znamená, že je umiestnená vo vnútri elementu <table> po elementoch <caption> a <colgroup> alebo pred <tfoot>, <tbody> a <tr>.
Pri použití sa prvok <thead> používa spolu s prvkom <tbody>, ktorý zobrazuje obsah tabuľky, a <tfoot>, ktorý zobrazuje spodok (nohy) tabuľky.
V HTML5 neexistujú žiadne špeciálne atribútymôžu byť použité pre elementy <thead>, zatiaľ čo v HTML4.01 existuje niekoľko atribútov a to zarovnanie, bgcolor, char, charoff a valign. Tieto atribúty sú však zastarané a na nastavenie elementu <thead> by ste mali použiť iba CSS.
Prvok Tbody
Prvok tbody sa používa na zoskupovanieobsah alebo obsah, ktorý je umiestnený v strede (tele) tabuľky. Značka <tbody> musí byť zahrnutá, pokiaľ tabuľka neobsahuje iba jednu tabuľku tela a nemá tabuľku hlavy alebo chodidla.
Pri použití sa prvok <tbody> používa spolu s prvkom <thead>, ktorý zobrazuje hornú časť (hlavu) tabuľky a <tfoot>, ktorý zobrazuje spodnú časť (nohy) tabuľky.
V HTML5 neexistujú žiadne špeciálne atribútymôžu byť použité pre elementy <tbody>, zatiaľ čo v HTML4.01 existuje niekoľko atribútov, a to zarovnanie, bgcolor, char, charoff a valign. Tieto atribúty sú však zastarané a na nastavenie elementu <tbody> by ste mali použiť iba CSS.
Tfoot element
Prvok tfoot sa používa na zoskupovanie obsahualebo obsah na spodku (stôp) tabuľky. Pri použití sa prvok <tfoot> používa spolu s prvkom <tbody>, ktorý zobrazuje obsah tabuľky, a <thead>, ktorý zobrazuje hornú časť (hlavu) tabuľky. Úvodná značka <tfoot> je zahrnutá, ak existuje tabuľka tfoot a uzatváraciu značku <tfoot> je možné ignorovať.
V HTML5 neexistujú žiadne špeciálne atribútyje možné použiť pre prvky <tfoot>, zatiaľ čo v HTML4.01 existuje niekoľko atribútov, a to zarovnanie, bgcolor, char, charoff a valign. Tieto atribúty sú však zastarané a na nastavenie elementu <tbody> by ste mali použiť iba CSS.
Nezabudnite na to, že kadidlo, telo, tfoot musia obsahovať rovnaký počet stĺpcov. Nasleduje príklad kódu na písanie a používanie týchto troch prvkov v 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>Výsledky v prehliadači, ako je tento:
Ako môžete vidieť z vyššie uvedeného kódu HTML,Aj keď som dal prvok tfoot vpredu (po úvodnej značke <table>), v prehliadači budú výsledky dole, pretože funkcia prvku tfoot zoskupuje obsah buniek alebo obsah v dolnej časti tabuľky. Podobne s prvkom thead, ktorý zoskupuje obsah buniek na začiatok (hlavu) tabuľky a prvok tbody v strede tabuľky.
Ako na to? Rozumiete funkcii týchto troch prvkov? Ak už rozumiete, prejdite na ďalší materiál týkajúci sa použitia značiek col, colgroup a titulov.
