cloud-hosting-terbaik-indonesia

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

Posted on

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


 

Seperti yang telah kita pelajari pada panduan mengenai perancangan tabel, sebuah tabel dapat dirancang dengan menggunakan 3 tag saja, yaitu tag table, tag tr, dan tag td. Namun bila kita membutuhkan pembagian struktur tabel HTML yang lebih jelas, HTML menyediakan tag khusus bagi kebutuhan ini, terdiri dari tag thead, tfoot dan tbody.

Bagi lebih memahami maksud dan cara pemakaian tag thead, tfoot dan tbody, seketika saja kita tampilkan kode HTMLnya. Silahkan buka program text editor, lalu ketikkan kode berikut, dan save selaku tabelstruktur.html.

Contoh pemakaian tag thead, tfoot dan tbody:

 Kode HTML diatas terasa sedikit panjang bagi membangun sebuah tabel bila diperbandingkan sewaktu membangun tabel sederhana pada panduan Cara Membuat tabel di HTML (tag table).

Kembali kedalam kode HTML diatas, perhatikan tag pembuka dan penutup bagi setiap tag tr pada 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 bagi membagi struktur tabel menjadi 3 bagian.

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

Tag thead, tfoot dan tbody mungkin tak akan sering diaplikasikan, terutama bagi membangun tabel sederhana dengan jumlah baris kurang dari 10. Namun bagi tabel yang kompleks, struktur HTML seperti ini akan mempermudah pada ‘mengatur’ tampilan tabel, terutama bila menggunakan kode CSS nantinya.

Bagi panduan berikutnya, kita akan membahas mengenai cara membuat kolom tabel menjadi satu grup dengan tag colgroup dan tag col.


Sumber https://www.duniailkom.com/