Belajar Struktur Tabel HTML (thead, tbody, tfoot)

Kalau sedang belajar struktur tabel HTML, biasanya perhatian kita cuma tertuju pada bagaimana caranya menampilkan data dalam bentuk baris dan kolom. Pokoknya tabel muncul, data terlihat, lalu selesai.

Saya juga dulu begitu.

Yang penting ada tag <table>, ada <tr>, ada <td>, hidup terasa damai.

Tapi setelah mulai sering membaca dokumentasi dan melihat kode milik developer lain, saya baru sadar ada bagian yang sering dilewatkan pemula, yaitu thead, tbody, dan tfoot.

Padahal ketiga elemen ini bukan sekadar hiasan tambahan. Mereka membantu membuat tabel lebih rapi, lebih mudah dipahami, bahkan lebih nyaman saat dikelola.

Kalau saat ini Anda masih bertanya, "Memangnya tabel HTML tidak bisa jalan tanpa thead, tbody, dan tfoot?"

Bisa.

Sama seperti motor bisa jalan tanpa spion. Tapi rasanya ada sesuatu yang kurang, kan?

Nah, di artikel Blog Adi Prayitno ini saya ingin berbagi pengalaman dan pemahaman soal struktur tabel HTML yang benar, khususnya penggunaan thead tbody tfoot yang sering dianggap sepele.

Kenalan Dulu dengan Struktur Tabel HTML

Saat sebuah tabel mulai berisi banyak data, HTML menyediakan cara untuk membaginya menjadi beberapa bagian.

Ibarat rumah, ada ruang tamu, ruang keluarga, dan dapur.

Kalau semuanya dicampur jadi satu ruangan, tetap bisa ditempati sih. Tapi lama-lama bikin pusing.

Begitu juga dengan tabel.

HTML menyediakan tiga bagian utama:

<thead> untuk kepala tabel
<tbody> untuk isi tabel
<tfoot> untuk bagian akhir atau ringkasan tabel

Dengan pembagian ini, browser dan developer bisa lebih mudah memahami isi tabel.

Dan percayalah, saat tabel mulai panjang, Anda akan bersyukur pernah mengenal struktur ini.

Apa Itu thead?

Bagian thead digunakan untuk menyimpan judul kolom.

Misalnya Anda membuat tabel daftar siswa.

Nama, kelas, alamat, dan nilai biasanya ditempatkan di bagian ini.

Contoh sederhananya seperti ini:

<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
</thead>

Kalau diperhatikan, isi thead hampir selalu menggunakan tag <th>.

Alasannya sederhana.

Karena bagian ini memang berfungsi sebagai penanda atau heading.

Saya pribadi menganggap thead seperti papan nama toko.

Sebelum masuk dan melihat isinya, orang harus tahu dulu toko itu menjual apa.

Lalu Apa Fungsi tbody?

Nah, kalau thead adalah papan nama, maka tbody adalah isi tokonya.

Di sinilah data utama disimpan.

Semua informasi yang ingin ditampilkan kepada pengunjung biasanya berada di bagian ini.

Contohnya:

<tbody>
<tr>
<td>Andi</td>
<td>XI IPA</td>
<td>90</td>
</tr>

<tr>
<td>Budi</td>
<td>XI IPS</td>
<td>88</td>
</tr>
</tbody>

Sebagian besar isi tabel biasanya memang berada di tbody.

Makanya namanya juga body.

Kalau tubuh manusia sebagian besar berat badan ada di badan, bukan di kepala atau kaki.

Kalau beratnya ada di kepala, mungkin itu karakter kartun.

tfoot yang Sering Dilupakan

Kalau jujur, bagian yang paling sering saya lihat diabaikan adalah tfoot.

Padahal fungsinya cukup berguna.

Bagian ini biasanya dipakai untuk:

Total nilai
Jumlah data
Ringkasan laporan
Kesimpulan tabel

Contoh:

<tfoot>
<tr>
<td colspan="2">Total</td>
<td>178</td>
</tr>
</tfoot>

Saat pertama belajar HTML, saya juga jarang menggunakan tfoot.

Karena berpikir, "Ah, tidak terlalu penting."

Sampai akhirnya membuat tabel laporan yang isinya puluhan data.

Di situlah saya mulai merasa, ternyata ringkasan di bagian bawah memang membantu pembaca.

Setidaknya mereka tidak perlu menghitung manual sambil menggaruk kepala.

Kenapa Struktur Tabel HTML Sebaiknya Menggunakan thead, tbody, dan tfoot?

Pertanyaan bagus.

Karena secara teknis tabel tetap bisa berjalan tanpa ketiganya.

Namun ada beberapa keuntungan yang sering tidak disadari.

Kode Lebih Mudah Dibaca

Saat membuka file HTML setelah beberapa bulan, Anda tidak perlu menebak-nebak bagian mana yang berisi judul dan bagian mana yang berisi data.

Semuanya sudah terbagi rapi.

Percayalah.

Versi diri Anda di masa depan akan berterima kasih.

Lebih Mudah Diberi CSS

Misalnya Anda ingin memberi warna khusus pada header.

Cukup targetkan bagian thead.

thead {
background: #f5f5f5;
}

Tidak perlu mencari satu per satu kolom yang ingin diubah.

Membantu Aksesibilitas

Browser dan teknologi pembaca layar bisa memahami struktur data dengan lebih baik.

Mungkin efeknya tidak langsung terlihat.

Tapi ini termasuk kebiasaan baik yang layak dibiasakan sejak awal belajar HTML.

Contoh Struktur Tabel HTML Lengkap

Berikut contoh yang lebih utuh:

<table border="1">

<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
</thead>

<tbody>
<tr>
<td>Andi</td>
<td>XI IPA</td>
<td>90</td>
</tr>

<tr>
<td>Budi</td>
<td>XI IPS</td>
<td>88</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="2">Rata-rata</td>
<td>89</td>
</tr>
</tfoot>

</table>

Coba lihat.

Bukankah tampilannya jauh lebih mudah dipahami dibanding semua baris ditumpuk menjadi satu?

Kalau menurut Anda tidak, mungkin mata Anda sudah terlalu terbiasa melihat kode berantakan.

Saya juga pernah berada di fase itu.

Kesalahan yang Sering Dilakukan Pemula

Ada beberapa hal yang sering saya temui saat belajar maupun melihat kode orang lain.

Menaruh Semua Data di tbody

Akibatnya judul kolom ikut bercampur dengan isi data.

Tabel memang tampil normal, tapi struktur logikanya jadi kurang jelas.

Tidak Menggunakan tfoot Sama Sekali

Padahal ada total nilai atau ringkasan yang sebenarnya cocok ditempatkan di sana.

Menggunakan td untuk Header

Header sebaiknya memakai <th> agar maknanya lebih jelas.

Kelihatannya sepele, tapi kebiasaan kecil seperti ini membuat kualitas kode meningkat.

Jadi, Apakah thead, tbody, dan tfoot Wajib?

Kalau pertanyaannya wajib agar tabel tampil?

Tidak.

Kalau pertanyaannya wajib agar struktur tabel HTML lebih rapi dan mudah dikelola?

Menurut saya, iya.

Apalagi kalau Anda mulai membuat proyek yang datanya semakin banyak.

Daripada nanti bingung mencari bagian tertentu di tengah ratusan baris kode, lebih baik membiasakan diri sejak sekarang.

Lagipula membuat thead, tbody, dan tfoot hanya menambah beberapa tag saja.

Tidak sampai membuat laptop menangis atau browser minta cuti.

Penutup

Kalau disimpulkan, struktur tabel HTML dengan penggunaan thead, tbody, dan tfoot membantu memisahkan bagian header, isi data, dan ringkasan tabel agar lebih mudah dipahami manusia maupun browser.

Beberapa hal penting yang bisa Anda ingat:

thead digunakan untuk judul kolom.
tbody digunakan untuk data utama.
tfoot digunakan untuk total atau ringkasan.
Struktur tabel menjadi lebih rapi.
CSS dan pengelolaan data jadi lebih mudah.
Cocok dibiasakan sejak awal belajar HTML.

Saya sendiri termasuk orang yang dulu menganggap bagian ini tidak terlalu penting. Setelah sering membuat tabel yang lebih kompleks, barulah terasa manfaatnya. Jadi kalau hari ini Anda sedang belajar HTML dan menemukan pembahasan tentang Struktur Tabel HTML (thead, tbody, tfoot), Anda sedang membaca hal yang tepat.

Terima kasih sudah mampir dan membaca artikel di Blog Adi Prayitno. Semoga artikel Struktur Tabel HTML (thead, tbody, tfoot): Kenapa Banyak Pemula Melewatkan Bagian Penting Ini? bisa membantu menjawab rasa penasaran yang mungkin sejak tadi mengganggu pikiran Anda.

Keyword yang dibahas dalam artikel ini:

Struktur tabel HTML, thead tbody tfoot, fungsi thead, fungsi tbody, fungsi tfoot, cara membuat tabel HTML, belajar HTML tabel, struktur table HTML yang benar.

Lokasi:

Adi Prayitno