Tag HTML <kaki>
Contoh
Tabel HTML dengan elemen <thead>, <tbody>, dan <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Tag <tfoot>digunakan untuk mengelompokkan konten footer dalam tabel HTML.
Elemen <tfoot>digunakan bersama dengan elemen
<thead> dan <tbody> untuk menentukan setiap bagian tabel (footer, header, body).
Browser dapat menggunakan elemen-elemen ini untuk mengaktifkan pengguliran badan tabel secara independen dari header dan footer. Juga, saat mencetak tabel besar yang mencakup beberapa halaman, elemen ini dapat mengaktifkan header dan footer tabel untuk dicetak di bagian atas dan bawah setiap halaman.
Catatan: Elemen <tfoot>harus memiliki satu atau lebih
tag <tr> di dalamnya.
Tag <tfoot>harus digunakan dalam konteks berikut: Sebagai anak dari
elemen <table> , setelah elemen
<caption> , <colgroup> ,
<thead > , dan <tbody> apa pun .
Tips: <thead>, <tbody>, dan <tfoot>elemen tidak akan memengaruhi tata letak tabel secara default. Namun, Anda dapat menggunakan CSS untuk menata elemen-elemen ini (lihat contoh di bawah)!
Dukungan Peramban
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes |
Atribut Global
Tag <tfoot>juga mendukung Atribut Global dalam HTML .
Atribut Acara
Tag <tfoot>juga mendukung Atribut Peristiwa dalam HTML .
Lebih Banyak Contoh
Contoh
Gaya <thead>, <tbody>, dan <tfoot> dengan CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Contoh
Cara menyelaraskan konten di dalam <tfoot> (dengan CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="text-align:center">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Contoh
Cara menyelaraskan konten secara vertikal di dalam <tfoot> (dengan CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr
style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Pengaturan CSS Default
Sebagian besar browser akan menampilkan <tfoot>elemen dengan nilai default berikut:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}