Tanda <thead> HTML

  • Halaman Sebelumnya <th>
  • Halaman Berikutnya <time>

Rekomendasi Kursus:

<thead> Definisi dan penggunaan

<thead> Elemen digunakan untuk mengelompokkan konten tajuk dalam tabel HTML. <tbody> dan </tfoot> elemen digabungkan untuk menentukan setiap bagian tabel (tajuk, konten, kaki).

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

Perhatian:<thead> Elemen internal harus memiliki satu atau lebih <tr> tanda.

<thead> Tanda ini harus digunakan dalam konteks berikut: sebagai <table> elemen anak, di setiap <caption> dan <colgroup> setelah elemen, serta di setiap <tbody>,</tfoot> dan <tr> sebelum elemen.

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

Contoh

Contoh 1

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

<table>
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Jumlah</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>Tabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Jumlah</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Coba Sendiri

Contoh 3

Bagaimana untuk mengatur rata <thead> ISI konten (dengan CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Coba Sendiri

Contoh 4

Bagaimana untuk mengatur rata vertikal <thead> ISI konten (dengan CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Bulan</th>
      <th>Tabungan</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Coba Sendiri

Atribut Global

<thead> Tanda juga mendukung Atribut Global dalam HTML.

Atribut Acara

<thead> Tanda juga mendukung Atribut Acara dalam HTML.

Pengaturan CSS Default

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

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan
  • Halaman Sebelumnya <th>
  • Halaman Berikutnya <time>