Tag tfoot
Tag tfoot mendefinisikan bagian bawah tabel.
Digunakan untuk mengelompokkan baris dengan cara
sehingga gaya CSS dapat langsung diterapkan ke
kelompok tertentu. Hanya boleh ada satu tag
tfoot dalam satu tabel.
Tag tfoot sering digunakan bersama
dengan thead
dan tbody
untuk mendefinisikan bagian atas, bagian utama,
dan bagian bawah tabel HTML. Secara default,
browser akan menempatkan konten tfoot
di bagian bawah tabel, dan thead -
di bagian atas.
Contoh
Mari kita berikan warna teks merah pada
kelompok baris yang dikelompokkan oleh tag
tfoot menggunakan properti
color:
<table>
<thead>
<tr>
<th>Nama</th>
<th>Marg</th>
<th>Gaji</th>
</tr>
</thead>
<tbody>
<tr>
<td>nama1</td>
<td>marg1</td>
<td>200$</td>
</tr>
<tr>
<td>nama2</td>
<td>marg2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>jumlah: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Contoh
Dan di sini, mari kita lihat, thead
bukan berada di atas, dan tfoot bukan di bawah,
namun browser akan menempatkannya di posisi
masing-masing:
<table>
<tfoot>
<tr>
<td>jumlah: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>nama1</td>
<td>marg1</td>
<td>200$</td>
</tr>
<tr>
<td>nama2</td>
<td>marg2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Nama</th>
<th>Marg</th>
<th>Gaji</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
