Cara Membuat Header Tabel

Pernah membuat tabel HTML lalu merasa tampilannya agak aneh meskipun datanya sudah muncul semua?

Saya pernah.

Waktu pertama kali belajar membuat header tabel dengan thead, saya menganggap semua baris dalam tabel itu sama saja. Yang penting data tampil, urusan selesai.

Tapi ternyata tidak sesederhana itu.

Saat jumlah data mulai banyak, saya mulai kesulitan membedakan mana judul kolom dan mana isi data. Rasanya seperti melihat daftar belanja yang dicampur dengan catatan utang tetangga. Semuanya ada, tapi bikin mata harus bekerja lembur.

Kalau Anda sedang belajar header tabel HTML, tenang saja. Anda tidak salah masuk artikel. Justru pembahasan ini termasuk salah satu hal kecil yang sering dianggap sepele, padahal manfaatnya terasa saat mulai membuat tabel yang lebih serius.

Sebenarnya Apa Itu <thead>?

Kalau diibaratkan sebuah buku, thead adalah halaman daftar isi.

Kalau diibaratkan sebuah warung makan, thead adalah papan menu yang dipasang di depan.

Dan kalau diibaratkan kehidupan nyata, thead adalah orang yang pertama kali menjelaskan, "Ini lho isi tabel yang akan kamu lihat."

Tag <thead> digunakan untuk menampung bagian kepala tabel atau header tabel.

Biasanya berisi nama kolom seperti:

• Nama
• Alamat
• Umur
• Nilai
• Harga
• Tanggal

Intinya, bagian yang menjelaskan isi data di bawahnya.

Kenapa Header Tabel Itu Penting?

Saya pernah melihat tabel yang isinya puluhan baris tanpa header yang jelas.

Jujur saja, rasanya seperti membaca chat grup keluarga yang sudah 2.000 pesan belum dibuka.

Bingung mau mulai dari mana.

Header membantu pembaca memahami data hanya dalam beberapa detik.

Misalnya ada kolom:

Nama	Umur	Kota

Sekilas saja kita langsung tahu isi tabel tersebut.

Bandingkan kalau hanya berisi angka dan teks tanpa judul kolom.

Kemungkinan besar pembaca akan mengernyitkan dahi lebih dulu sebelum memahami isinya.

Cara Membuat Header Tabel dengan <thead>

Struktur dasarnya cukup sederhana.

<table>

<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
</thead>

</table>

Perhatikan bagian ini.

<th>Nama</th>

Tag <th> digunakan sebagai judul kolom.

Sedangkan <thead> menjadi wadah yang menampung seluruh header tersebut.

Jadi keduanya saling melengkapi.

Kalau thead adalah rumahnya, maka th adalah penghuni rumahnya.

Jangan sampai rumahnya ada, penghuninya tidak ada. Nanti sepi.

Perbedaan <th> dan <thead>

Nah, ini pertanyaan yang cukup sering muncul di kalangan pemula.

"Kalau sudah ada th, kenapa masih perlu thead?"

Pertanyaan yang bagus.

Karena keduanya memang punya tugas berbeda.

<th>

Digunakan untuk membuat judul kolom.

Contoh:

<th>Nama</th>

<thead>

Digunakan untuk mengelompokkan seluruh bagian header tabel.

Contoh:

<thead>
...
</thead>

Jadi jangan tertukar.

Meskipun sering muncul bersamaan, mereka bukan tag yang sama.

Mirip kopi dan cangkir.

Biasanya bersama, tetapi fungsinya berbeda.

Contoh Header Tabel yang Lebih Lengkap

Misalnya kita ingin membuat tabel data siswa.

<table border="1">

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

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

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

</table>

Kalau dilihat, bagian header langsung terlihat jelas.

Pembaca tidak perlu menebak-nebak arti angka yang muncul di dalam tabel.

Dan percaya deh, pembaca sangat suka kalau tidak disuruh menjadi cenayang.

Keuntungan Menggunakan <thead>

Setelah beberapa kali membuat proyek HTML, saya mulai menyadari manfaatnya.

Mungkin tidak langsung terasa saat tabel masih kecil.

Tapi saat datanya mulai banyak, manfaatnya mulai muncul satu per satu.

Kode Lebih Rapi

Saat membuka file HTML berbulan-bulan kemudian, Anda langsung tahu bagian mana yang merupakan header.

Tidak perlu mencari-cari seperti mencari charger yang hilang padahal ada di samping bantal.

Lebih Mudah Diberi CSS

Misalnya ingin memberi warna khusus pada header.

thead {
background-color: #f2f2f2;
}

Selesai.

Semua header langsung berubah tanpa perlu mengatur satu per satu.

Membantu Pembaca Memahami Data

Ini mungkin manfaat terbesar.

Karena tujuan tabel sebenarnya bukan hanya menampilkan data.

Tetapi membuat data mudah dipahami.

Kesalahan yang Sering Dilakukan Pemula

Saya dulu juga pernah melakukan beberapa kesalahan ini.

Jadi kalau Anda masih melakukannya, santai saja.

Masih aman.

Menggunakan <td> untuk Header

Contoh:

<td>Nama</td>

Secara tampilan memang bisa muncul.

Tetapi secara struktur kurang tepat.

Header sebaiknya menggunakan <th>.

Tidak Menggunakan <thead>

Semua data dicampur menjadi satu bagian.

Akibatnya struktur tabel menjadi kurang jelas.

Menulis Header Lebih dari Satu Kali

Kadang karena terburu-buru, ada yang menulis header di tengah-tengah data.

Akhirnya tabel terlihat seperti sinetron yang tiba-tiba ganti cerita di episode ke-300.

Kapan Sebaiknya Menggunakan <thead>?

Jawaban singkatnya:

Hampir selalu.

Selama tabel memiliki judul kolom, penggunaan thead sangat disarankan.

Bahkan meskipun tabel hanya memiliki beberapa baris data.

Karena semakin cepat terbiasa membuat struktur yang benar, semakin mudah saat nanti mengerjakan proyek yang lebih besar.

Saya pribadi sekarang hampir tidak pernah membuat tabel tanpa thead.

Bukan karena aturan wajib.

Tetapi karena sudah terasa lebih nyaman dan lebih rapi.

Penutup

Kalau disimpulkan, membuat header tabel dengan thead adalah langkah sederhana yang membuat tabel HTML jauh lebih mudah dipahami.

Hal penting yang bisa Anda ingat:

• <thead> digunakan untuk bagian header tabel.
• <th> digunakan sebagai judul kolom.
• Header membantu pembaca memahami data lebih cepat.
• Struktur HTML menjadi lebih rapi.
• CSS lebih mudah diterapkan.
• Cocok dibiasakan sejak awal belajar HTML.

Dulu saya menganggap thead hanyalah tag tambahan yang tidak terlalu penting. Setelah sering membuat tabel dengan banyak data, saya baru sadar bahwa keberadaan header yang jelas membuat pengalaman membaca jauh lebih nyaman.

Terima kasih sudah berkunjung ke Blog Adi Prayitno dan membaca artikel Membuat Header Tabel dengan <thead>: Cara Biar Tabel HTML Tidak Terlihat Berantakan. Semoga setelah membaca sampai akhir, Anda tidak lagi bingung saat ingin membuat header tabel HTML yang rapi dan mudah dipahami.

---

Topik yang dibahas dalam artikel ini:

Membuat header tabel dengan thead, fungsi thead HTML, cara menggunakan thead, header tabel HTML, tag thead, th dan thead, belajar HTML pemula, struktur tabel HTML.

Berbagi :