-->
›

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

January 22, 2018 Add Comment
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>

Struktur tabel HTML

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

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.

0 Response to "Cara Membuat Struktur Tabel HTML(Tag thead, tbody dan tfoot)"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel