Home / Tutorial HTML / Cara Membuat Struktur Tabel HTML(Tag thead, tbody dan tfoot)

Cara Membuat Struktur Tabel HTML(Tag thead, tbody dan tfoot)

Untuk tabel HTML yang sangat kompleks, HTML menyediakan tag yang dapat digunakan untuk memisahkan bagian-bagian dari tabel, misalnya untuk judul, isi dan penutup tabel atau biasa disebut dengan struktur tabel. Pada artikel kali ini kita akan membahas Cara Membuat Struktur Tabel dengan Menggunakan Tag <thead>, <tbody> dan <tfoot>.

Penggunaan dan Penulisan Tag <thead>, <body>, dan <tfoot>

Membuat tabel HTML dapat dibuat dengan menggunakan 3 tag saja, yaitu tag <table>, <tr> dan <td>. Namun untuk tabel yang sangat kompleks, kita perlu menggunakan tag <thead>, <tbody> dan <tfoot> untuk membuat struktur dari tabel.

Tag <thead>

Tag <thead> merupakan singkatan dari table header yang digunakan untuk mengelompokkan data tabel yang terletak di bagian atas (kepala) sebuah tabel yaitu judul tabel.

Tag <tbody>

Tag <tbody> merupakan singkatan dari table body yang digunakan untuk mengelompokkan data tabel yang terletak di bagian tengah (tubuh) sebuah tabel yaitu isi data tabel. Jika di dalam tabel tidak ada tag <thead> dan <tfoot> maka tag <tbody> tidak harus digunakan dalam tabel HTML.

Tag <tfoot>

Tag <tfoot> digunakan untuk mengelompokkan data tabel yang berada dibagian bawah (kaki) sebuah tabel yaitu penutup tabel.

Berikut ini penulisan tag <thead>, <tbody> dan <tfoot> dalam tabel HTML :

<!DOCTYPE html> <html> <head>     <title>Belajar HTML</title> </head> <body> <table border="1">     <thead>         <tr>             <th>Barang</th>             <th>Harga</th>         </tr>     </thead>     <tfoot>         <tr>             <td>Total Harga</td>             <td>Rp 90.000</td>         </tr>     </tfoot>     <tbody>         <tr>             <td>Kaos kaki</td>             <td>Rp 10.000</td>         </tr>         <tr>             <td>Tas</td>             <td>Rp 50.000</td>         </tr>         <tr>             <td>Sepatu</td>             <td>Rp 30.000</td>         </tr>     </tbody> </table> </body> </html>

 HTML menyediakan tag yang dapat digunakan untuk memisahkan bagian Cara Membuat Struktur Tabel HTML(Tag thead, tbody dan tfoot)

Karena ini hanya contoh sebagai bahan pembelajaran, jadi Saya tidak membuat tabel HTML yang kompleks.

Baca :  Penggunaan dan Penulisan Meta Tag Charset UTF-8 Pada HTML5

Coba anda perhatikan urutan penulisan tabel HTML diatas, terdapat tag <tfoot>...<tfoot> yang tepat berada diatas tag pembuka <tbody>, namun jika ditampilkan di browser data yang ada di dalam tag <tfoot>...<tfoot> akan ditampilkan pada baris terakhir tabel.

Tag <thead>, <tbody> dan <tbody> mungkin akan sangat jarang digunakan, terutama untuk membuat tabel sederhana dengan jumlah baris kurang dari 10. Namun untuk tabel yang sangat kompleks, penggunaan tag <thead>, <tbody> dan <tbody> akan sangat membantu Anda dalam membuat struktur tabel atau mengatur tampilan tabel dengan kode CSS.

Pada artikel selanjutnya kita akan mempelajari Cara Membuat Kolom Tabel HTML Menjadi Satu Grup.

About xenodochial-rhodes