Tanda <tfoot> HTML

Definisi dan penggunaan

<tfoot> Tanda digunakan untuk mengelompokkan konten kaki halaman dalam tabel HTML.

<tfoot> Elemen digabungkan dengan <thead> dan <tbody> Elemen digabungkan untuk menentukan setiap bagian tabel (kaki halaman, tajuk halaman, konten tabel).

Peramban dapat menggunakan elemen ini untuk membuat tajuk dan kaki halaman dapat ditampilkan secara terpisah saat menggulir konten tabel. Selain itu, saat mencetak tabel besar yang melintasi beberapa halaman, elemen ini dapat membuat tajuk dan kaki halaman dicetak di atas dan bawah setiap halaman.

Perhatian: Element <tfoot> harus mengandung satu atau lebih <tr> tanda.

<tfoot> Tanda ini harus digunakan dalam konteks berikut: sebagai <table> Anak elemen dari elemen, di mana saja <caption>、<colgroup>、<thead> dan <tbody> setelah elemen.

Petunjuk:Secara default, <thead>, <tbody> dan <tfoot> Elemen ini tidak akan mempengaruhi tata letak tabel. Namun, Anda dapat menata gaya elemen ini menggunakan CSS (lihat contoh di bawah)!

Contoh

Contoh 1

Tabel HTML yang mengandung elemen <thead>, <tbody> dan <tfoot>:

<table>
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Selamatkan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bulan Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Grand Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

Contoh 2

Atur gaya <thead>, <tbody> dan <tfoot> menggunakan 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>Bulan</th>
      <th>Selamatkan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bulan Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Grand Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

Contoh 3

Bagaimana untuk menarikkan <tfoot> Isi yang ada (dengan CSS):

<table style="width:100%">
  <tr>
    <th>Bulan</th>
    <th>Selamatkan</th>
  </tr>
  <tr>
    <td>Bulan Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Grand Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

Contoh 4

Bagaimana untuk menarikkan secara vertikal <tfoot> Isi yang ada (dengan CSS):

<table style="width:100%">
  <tr>
    <th>Bulan</th>
    <th>Selamatkan</th>
  </tr>
  <tr>
    <td>Bulan Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Grand Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

Atribut Global

<tfoot> Tanda masih mendukung Atribut Global di HTML.

Atribut Acara

<tfoot> Tanda masih mendukung Atribut Acara di HTML.

Pengaturan CSS Default

Sebagian besar peramban akan menampilkan nilai default berikut <tfoot> Elemen:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan