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 1 | Judul 2 | Judul 3 |
|---|---|---|
| Footer 1 | Footer 2 | Footer 3 |
| Baris 1, Kolom 1 | Baris 1, Kolom 2 | Baris 1, Kolom 3 |
| Baris 2, Kolom 1 | Baris 2, Kolom 2 | Baris 2, Kolom 3 |
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