Rabu, 21 Oktober 2020

Tutorial Tabel HTML Part 5: Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody)

Untuk tabel yang lebih kompleks, HTML menyediakan tag-tag yang dapat digunakan untuk ‘membagi’ tabel menjadi bagian-bagian yang terpisah, misalnya bagian judul (head), bagian penutup (foot), dan bagian isi tabel (body). Untuk keperluan tersebut, pada tutorial tabel HTML kali ini kita akan mempelajari Cara Membuat Struktur Tabel HTML dengan tag thead, tfoot dan tbody.




 


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.


Untuk lebih memahami maksud dan cara penggunaan tag thead, tfoot dan tbody, langsung saja kita tampilkan kode HTMLnya. Silahkan buka aplikasi text editor, lalu ketikkan kode berikut, dan save sebagai tabelstruktur.html.


Contoh penggunaan tag thead, tfoot dan tbody:





Penggunaan Tag thead, tfoot dan tbody dalam Tabel


Belajar Tag thead, tfoot dan tbody dalam Tabel



   
       
         
         
         
       
   
   
       
         
         
         
       
   
   
       
         
         
         
       
       
          
          
          
       
   
Judul 1Judul 2Judul 3
Footer 1Footer 2Footer 3
Baris 1, Kolom 1Baris 1, Kolom 2Baris 1, Kolom 3
Baris 2, Kolom 1Baris 2, Kolom 2Baris 2, Kolom 3



Contoh Cara Membuat Struktur Tabel HTML (thead, tfoot dan tbody)Kode HTML diatas terasa sedikit panjang untuk membuat sebuah tabel bila dibandingkan sewaktu membuat tabel sederhana dalam tutorial Cara Membuat tabel di HTML (tag table).


Kembali kedalam kode HTML diatas, perhatikan tag pembuka dan penutup untuk setiap tag tr dalam tabel. Terlihat bahwa kita menggunakan 3 tag baru, yakni tag thead, tfoot dan tbody (singkatan dari table header, table foot, dan table body). Ketiga tag tersebut digunakan untuk membagi struktur tabel menjadi 3 bagian.


Perhatikan pula urutan penulisan tabel diatas. Dapat dilihat bahwa untuk tag tfoot, walaupun dibuat persis setelah thead pada awal tabel, namun web browser akan menampilkannya pada baris terakhir dari tabel.


Tag thead, tfoot dan tbody mungkin tidak akan sering dipakai, terutama untuk membuat tabel sederhana dengan jumlah baris kurang dari 10. Namun untuk tabel yang kompleks, struktur HTML seperti ini akan memudahkan dalam ‘mengatur’ tampilan tabel, terutama jika menggunakan kode CSS nantinya.


Untuk tutorial selanjutnya, kita akan membahas tentang cara membuat kolom tabel menjadi satu grup dengan tag colgroup dan tag col.



Sumber wk.com


EmoticonEmoticon