HTML thead tag | belajar <thead> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML thead tag. Tutorial dan panduan mengenai element <thead>...</thead> yang digunakan untuk konten bagian atas (kepala) sebuah tabel. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <thead>.

Deskripsi
Penjelasan HTML thead tag

thead menunjukkan sebuah table head atau bagian kepala sebuah tabel (table element).

HTML <thead> element digunakan untuk mengelompokkan konten yang terletak di kepala (atas) sebuah tabel. Di dalam element <thead> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

Dalam sebuah tabel, <thead> element digunakan bersamaan dengan element <tbody> yang menunjukkan isi tabel dan <tfoot> yang menunjukkan bagian kaki sebuah tabel.

Dalam penggunaannya, <thead> harus ditulis sebagai anak element dari <table> atau lebih tepatnya terletak di dalam element <table> setelah <caption> dan <colgroup> element, atau sebelum <tbody>, <tfoot> dan <tr>.

Element <thead>, <tbody> dan <tfoot> sangat berguna ketika menulis sebuah tabel yang panjang lebar dan lebih dari satu halaman, yang mana masing-masing halaman tersebut, table header dan footer-nya ikut terlampir (tertulis atau tercetak). Ketiga element itu tidak akan mempengaruhi layout sebuah table, akan tetapi, Anda dapat menggunakan CSS style untuk mengatur sesuai keinginan.

TIPS

Tag pembuka (<thead>) wajib ditulis, sedangkan tag penutup (</thead>) boleh diabaikan (tidak ditulis) apabila setelah element <thead> tersebut, diikuti langsung oleh element <tbody> atau <tfoot>.

Attributes
Atribut HTML Tag <thead>

Pada HTML5 <thead> tidak memiliki attribute khusus yang dapat digunakan, sedangkan didalam HTML 4.01 terdapat attribute align, bgcolor, char, charoff dan valign. Attributes ini sudah usang dan tidak dipakai lagi didalam HTML5, sehingga tidak dibahas disini.

Global Attributes
Atribut Secara Global (Keseluruhan)

<thead> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<thead> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <thead> element

Contoh <thead> element, dapat dilihat pada baris ke-2 sampai dengan baris ke-7.

HTML 
<table>
  <thead>
    <tr>
     <th>Bulan</th>
     <th>Bayar Listrik</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
     <td>Jumlah</td>
     <td>410000</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
     <td>September</td>
     <td>210000</td>
    </tr>
    <tr>
     <td>Oktober</td>
     <td>200000</td>
    </tr>
  </tbody>
</table>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML thead tag by:apacara.com</title>
    <style></style>
  </head>
  <body>
    <table>
     <thead>
      <tr>
         <th>Bulan</th>
         <th>Bayar Listrik</th>
      </tr>
     </thead>
     <tfoot>
      <tr>
         <td>Jumlah</td>
         <td>410000</td>
      </tr>
     </tfoot>
     <tbody>
      <tr>
         <td>September</td>
         <td>210000</td>
      </tr>
      <tr>
         <td>Oktober</td>
         <td>200000</td>
      </tr>
     </tbody>
    </table>
  </body>
</html>
SHARE
Previous Article Next Article