Contoh
Tabel HTML dengan <thead>, <tfoot> , dan <tbody> elemen:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Cobalah sendiri " Definisi dan Penggunaan
The <thead> tag digunakan untuk kelompok isi header dalam sebuah tabel HTML.
The <thead> elemen digunakan dalam hubungannya dengan <tbody> dan <tfoot> elemen untuk menentukan setiap bagian dari tabel (header, body, footer).
Browser dapat menggunakan elemen ini untuk mengaktifkan bergulir dari tubuh tabel secara independen dari header dan footer. Juga, saat mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak pada bagian atas dan bawah setiap halaman.
The <thead> tag harus digunakan dalam konteks berikut: Sebagai anak dari <table> elemen, setelah setiap <caption>, dan <colgroup> elemen, dan sebelum <tbody>, <tfoot> , dan <tr> elemen.
Dukungan Browser
| Elemen | |||||
|---|---|---|---|---|---|
| <thead> | iya nih | iya nih | iya nih | iya nih | iya nih |
Tips dan Catatan
Catatan: <thead> elemen harus memiliki satu atau lebih <tr> tag di dalam.
Tip: The <thead>, <tbody> , dan <tfoot> elemen tidak akan mempengaruhi tata letak meja secara default.Namun, Anda dapat menggunakan CSS untuk gaya elemen-elemen ini.
Perbedaan Antara HTML 4.01 dan HTML5
Tak satu pun dari HTML 4.01 atribut yang didukung di HTML5.
atribut
| Atribut | Nilai | Deskripsi |
|---|---|---|
| align | right left center justify char | Tidak didukung di HTML5. Menyelaraskan konten dalam <thead> elemen |
| char | character | Tidak didukung di HTML5. Menyelaraskan konten dalam <thead> elemen karakter |
| charoff | number | Tidak didukung di HTML5. Menyetel jumlah karakter konten dalam <thead> elemen akan disesuaikan dari karakter ditentukan oleh char atribut |
| valign | top middle bottom baseline | Tidak didukung di HTML5. Vertikal sejajar konten dalam <thead> elemen |
Atribut global
The <thead> tag juga mendukung Atribut Global di HTML .
Atribut acara
The <thead> tag juga mendukung Acara Atribut di HTML .
Pengaturan Default CSS
Kebanyakan browser akan menampilkan <thead> elemen dengan nilai default berikut:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}