Mengenal Struktur Table HTML Menggunakan Tag thead, tfoot dan tbody

Kuy Belajar - Mengenal Struktur Table HTML Menggunakan Tag thead, tfoot dan tbody. Assalamualaikum sobat semua, kita ketemu lagi nih. Sebelumnya kita telah membahas materi tentang Cara Membuat Judul Pada Table di HTML Dengan Tag Caption. nah kita masih akan membahas seputar Table di HTML. Kuy langsung saja kita mulai pembahasannya!

Pada table yang kompleks, HTML menyediakan tag yang dapat membagi tabel menjadi beberapa bagian, yaitu : bagian judul (head), bagian isi tabel (body), dan bagian penutup (foot).

Seperti yang telah kita pelajari dalam tutorial tentang pembuatan tabel, sebuah tabel dapat dirancang dengan menggunakan 3 tag saja, yaitu tag table, tag tr, dan tag td.

Namun jika kita membutuhkan pembagian struktur tabel HTML yang lebih jelas, HTML menyediakan tag khusus untuk keperluan ini, terdiri dari tag thead, tfoot dan tbody.

Pengertian Tag thead

thead menunjukkan sebuah table head atau bagian kepala sebuah tabel (table 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.

Berikut ini adalah contohnya:















<thead>   


   <tr>

        <th Contoh Thead </td>       

   </tr>

</thead>

Pengertian Tag tbody

tbody menunjukkan sebuah table body (bodi tabel) atau bagian pokok isi sebuah tabel. digunakan untuk mengelompokkan konten yang terletak pada bagian tubuh table itu sendiri. Di dalam element <tbody> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

Berikut ini adalah contohnya:















<tbody>   


   <tr>

        <td Contoh Tbody </td>       

   </tr>

</tbody>

Pengertian Tag tfoot

tfoot menunjukkan sebuah table foot atau bagian kaki (bawah) sebuah tabel (table element).digunakan untuk mengelompokkan konten yang terletak di kaki (bawah) sebuah tabel. Di dalam element <tfoot> tersebut, harus ditulis element <tr> yang menunjukkan table row atau baris sebuah table.

Berikut ini adalah contohnya:















<tfoot>   


   <tr>

        <td Contoh Tfoot </td>       

   </tr>

</tfoot>

Contoh penggunaan tag thead, tfoot dan tbody

Di atas sudah kita lihat beberapa penggal skrip thead, tbody, dan tfoot. nah kali ini kita akan menggabungkan ketiganya untuk kita masukan ke dalam satu file HTML, sobat sudah penasaran kan? Kuy simak dan praktikkan kode HTML di bawah ini.


<html>




<title>Kuy Belajar format Table</title>










</head>










<body>










<h1> Kuy Belajar Format Tabel </h1>










<table border="1">



<thead>








    <tr>










        <th>Header 1</th>








        <th>Header 2</th>






        <th>Header 3</th>





    </tr>

</thead>



<tbody>












    <tr>










        <td>Baris 1, Kolom 1</td>








        <td>Baris 1, Kolom 2</td>






        <td>Baris 1, Kolom 3</td>





    </tr>

</tbody>




<tfoot>









    <tr>


        <td>Footer 1</td>

        <td>Footer 2</td>

        <td>Footer 3</td>

   </tr>

</tfoot> 

</table> 












</html>

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Dalam penulisan Tag <thead>, <tbody> dan <tfoot> tidak harus berutan seperti yang kita praktikkan, sobat bisa saja menulis <tbody> lalu <thead> dan <tfoot>.

Tag <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, sobat dapat menggunakan CSS style untuk mengatur sesuai keinginan.

Saya kira itu lah dia pembahasan kita tentang Mengenal Struktur Table HTML Menggunakan Tag thead, tfoot dan tbody. Sekian dulu dari saya "Singkat, Semoga Bermanfaat."

Keep Coding ya Sobat!

Kuy ke Materi berikutnya : Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col)