Учене на HTML част 22: Използване на елементи Thead, Tbody и Tfoot в HTML таблици
Редовете в таблицата могат да бъдат разделенив таблици thead, tfoot и tbody таблици, изразени от елементи thead, tfoot и tbody. Всяка thead, tfoot и tbody съдържат група от редове и всяка група съдържа най-малко един ред, определен от <tr> елемента.
Елементите <thead>, <tfoot> и <tbody> ще бъдат многополезно при писането на таблица, която е дълга, широка и има повече от една страница, където са написани и всяка от страниците, таблиците за глава и крак. Използването на тези три елемента ще ви помогне да подредите таблицата по ваше желание, като използвате CSS стил и няма да повлияе на оформлението на таблица. За повече подробности, нека разгледаме обяснението по-долу:
Елемент на thead
Елементът Thead се използва за групиране на съдържаниеили съдържание, което е в горната част (главата) в таблица. <thead> тагът е написан като елемент на дъвка на елемента <table>, което означава, че се намира вътре в елемента <table> след елементите <caption> и <colgroup> или преди <tfoot>, <tbody> и <tr>.
При употреба елементът <thead> се използва заедно с елемента <tbody>, който показва съдържанието на таблицата, и <tfoot>, който показва дъното (краката) на таблицата.
В HTML5 няма специални атрибутиможе да се използва за <thead> елементи, докато в HTML4.01 има няколко атрибута, а именно подравняване, bgcolor, char, charoff и valign. Тези атрибути обаче са остарели и трябва да използвате CSS само за да зададете елемента <thead>.
Tbody елемент
Елементът tbody се използва за групиранесъдържание или съдържание, което се намира в средата (тялото) на таблицата. <tbody> тагът трябва да бъде включен, освен ако таблицата не съдържа само една таблица на тялото и няма маса или глава или крак.
При употреба елементът <tbody> се използва заедно с елемента <thead>, който показва горната част (главата) на таблицата, и <tfoot>, който показва долната част (краката) на таблицата.
В HTML5 няма специални атрибутиможе да се използва за елементи <tbody>, докато в HTML4.01 има няколко атрибута, а именно подравняване, bgcolor, char, charoff и valign. Тези атрибути обаче са остарели и трябва да използвате CSS само за да зададете елемента <tbody>.
Елемент на стъпалото
Елементът tfoot се използва за групиране на съдържаниеили съдържание в долната част (краката) на таблицата. При употреба елементът <tfoot> се използва заедно с елемента <tbody>, който показва съдържанието на таблицата и <thead>, който показва горната част (главата) на таблицата. Началният маркер <tfoot> е включен, ако таблицата за tfoot съществува и затварящият маркер <tfoot> може да бъде игнориран.
В HTML5 няма специални атрибутиможе да се използва за <tfoot> елементи, докато в HTML4.01 има няколко атрибута, а именно подравняване, bgcolor, char, charoff и valign. Тези атрибути обаче са остарели и трябва да използвате CSS само за да зададете елемента <tbody>.
Трябва да запомните, че thead, tbody, tfoot трябва да съдържат същия брой колони. Следва пример на кода за писане и използване на тези три елемента в 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>Резултатите в браузър като този:
Както можете да видите от HTML кода по-горе,въпреки че поставям елемента tfoot отпред (след отварящия маркер <таблица>), в браузъра резултатите ще бъдат отдолу, тъй като функцията на този елемент tfoot групира съдържанието на клетки или съдържание в долната част на таблицата. По същия начин с елемента thead, който групира съдържанието на клетките в началото (главата) на таблицата и елемента tbody в средата на таблицата.
Как да го направя? Разбирате ли функцията на тези три елемента? Ако вече разбирате, моля, пристъпете към следващия материал относно използването на етикетите col, colgroup и caption.
