Membuat Tabel

Pernahkah Anda membuka halaman web yang berisi daftar harga, jadwal, atau data nilai yang tersusun rapi dalam kotak-kotak? Itulah yang disebut tabel. Dalam HTML, membuat tabel adalah keterampilan dasar yang tetap relevan sampai sekarang — mulai dari tabel harga produk, jadwal kelas, laporan keuangan, sampai perbandingan fitur. Kabar baiknya, tabel HTML tidak serumit kelihatannya. Hanya butuh tiga tag inti, dan Anda sudah bisa membuat tabel sederhana dalam hitungan menit. Di artikel ini kita akan membahasnya dari nol: tag apa saja yang dipakai, cara membaca struktur tabel, langkah praktis membangun tabel, sampai trik dan kesalahan umum yang sering bikin tabel tampil berantakan.

Dulu, Satu Peringatan Penting: Tabel untuk Tabel

Sebelum masuk ke kode, ada satu nasihat yang perlu diingat sampai kapan pun: gunakan tabel untuk menampilkan data tabular, bukan untuk menyusun layout halaman. Di awal era web, banyak desainer memakai tabel sebagai kerangka layout — menaruh menu di satu sel, konten di sel lain, dan seterusnya. Cara itu dulu terasa praktis, tetapi sekarang sangat tidak disarankan.

Mengapa? Ada beberapa alasan:

• Memberatkan halaman. Struktur tabel yang bersarang (nested) membuat HTML menjadi sangat panjang dan sulit dibaca browser.
• Sulit responsif. Tabel kaku secara alami; membuatnya menyesuaikan layar ponsel jauh lebih merepotkan dibanding flexbox atau grid.
• Bermasalah untuk aksesibilitas. Pembaca layar (screen reader) akan membaca tabel baris per baris, sehingga layout berbasis tabel jadi membingungkan bagi pengguna disabilitas.
• Sulit dirawat. Mengubah satu bagian layout bisa merusak struktur sel di tempat lain.

Untungnya, sekarang kita punya CSS modern seperti Flexbox dan Grid untuk urusan layout, sementara tabel kembali ke fungsi aslinya: menyajikan data. Jadi, mari fokus ke sana.

Tiga Komponen Inti Tabel HTML

Ada tiga tag yang menjadi fondasi setiap tabel HTML:

• <table> — pembungkus utama yang menandai awal dan akhir tabel.
• <tr> (table row) — penanda satu baris.
• <td> (table data) — penanda satu sel/kolom di dalam baris.

Bayangkan tabel seperti lemari arsip: <table> adalah lemari itu sendiri, <tr> adalah setiap laci (baris), dan <td> adalah setiap pembatas di dalam laci tempat dokumen diletakkan (sel).

Contoh Pertama: Tabel Sederhana 3 Kolom x 2 Baris

Mari kita langsung praktik. Berikut contoh tabel sederhana dengan tiga kolom dan dua baris:

<code class="language-html"><table>
<tr> <td>Kolom 1 Baris 1</td> <td>Kolom 2 Baris 1</td> <td>Kolom 3 Baris 1</td>
</tr>
<tr> <td>Kolom 1 Baris 2</td> <td>Kolom 2 Baris 2</td> <td>Kolom 3 Baris 2</td>
</tr>
</table>

Hasilnya akan tampil seperti ini:

Mudah dipahami, kan? Setiap <tr> membuka satu baris, dan di dalamnya kita menaruh <td> sebanyak kolom yang diinginkan. Jumlah <td> di setiap baris harus konsisten agar tabel tampil rapi.

Langkah Praktis: Bangun Tabel dari Nol

Saat saya pertama kali belajar, cara paling efektif adalah membangun tabel bertahap, bukan langsung menulis semuanya. Berikut rutinitas yang biasa saya pakai:

Langkah 1 — Tulis dulu kerangka tabelnya.

<code class="language-html"><table>
</table>

Langkah 2 — Masukkan baris. Kalau ingin dua baris, pasang dua tag <tr>:

<code class="language-html"><table>
<tr>
</tr>
<tr>
</tr>
</table>

Langkah 3 — Tambahkan kolom di setiap baris. Mulailah dari baris pertama dulu agar fokus:

<code class="language-html"><table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

Langkah 4 — Terakhir, isi selnya.

<code class="language-html"><table>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
</tr>
</table>

Selesai! Pola ini membuat proses berpikir jauh lebih tenang: kerangka dulu, baris, kolom, baru isi. Daripada langsung menulis 30 baris kode sekaligus, Anda cukup mengisi satu bagian pada satu waktu.

Menambahkan Header Tabel dengan th dan thead

Tabel sederhana sudah bagus, tapi untuk data yang serius Anda pasti butuh baris judul kolom. Di sinilah tag <th> (table header) dan elemen semantik seperti <thead>, <tbody>, dan <tfoot> berperan.

Contoh tabel dengan header:

<code class="language-html"><table>
<thead>
<tr> <th>Nama</th> <th>Kota</th> <th>Nilai</th>
</tr>
</thead>
<tbody>
<tr> <td>Bejo</td> <td>Surabaya</td> <td>85</td>
</tr>
<tr> <td>Paijo</td> <td>Malang</td> <td>90</td>
</tr>
</tbody>
</table>

Secara default, teks di dalam <th> tampil tebal dan rata tengah, sehingga jelas terlihat sebagai judul kolom. Membungkus header dalam <thead> dan isi dalam <tbody> juga membantu browser dan screen reader memahami struktur tabel, sekaligus memudahkan styling CSS nantinya.

Mempercantik Tabel dengan CSS

Tabel HTML polos terlihat membosankan, tetapi dengan beberapa baris CSS, tampilannya bisa jauh lebih profesional. Contoh gaya sederhana:

<code class="language-css">table { border-collapse: collapse; width: 100%;
} th, td { border: 1px solid #ddd; padding: 8px; text-align: left;
} th { background-color: #f2f2f2;
} tr:nth-child(even) { background-color: #f9f9f9;
}

Beberapa hal yang perlu diperhatikan:

• border-collapse: collapse menggabungkan garis antar sel sehingga tidak ada garis ganda.
• Padding memberi ruang napas pada isi sel.
• Warna latar bergantian pada baris genap membuat tabel jauh lebih mudah dibaca.
• Untuk layar kecil, pertimbangkan membuat tabel bisa di-scroll horizontal dengan membungkusnya dalam elemen <div> ber-overflow-x: auto.

Sebelum lanjut, pastikan Anda sudah paham struktur dasar halaman web tempat tabel ini akan ditempatkan — artikel HTML Pertamaku membahas fondasi HTML dari nol sampai Anda bisa membuat halaman sendiri.

Tabel Kompleks: Menggabungkan Sel dengan rowspan dan colspan

Kadang data tidak selalu simetris — ada sel yang perlu membentang ke bawah atau ke samping. Di sinilah dua atribut penting berperan:

• rowspan — menggabungkan sel secara vertikal (ke bawah). Contoh: rowspan="2" berarti sel tersebut menutupi dua baris.
• colspan — menggabungkan sel secara horizontal (ke samping). Contoh: colspan="3" berarti sel membentang menutupi tiga kolom.

Contoh penggunaan colspan untuk judul yang membentang:

<code class="language-html"><table>
<tr> <th colspan="3">Data Nilai Siswa</th>
</tr>
<tr> <th>Nama</th> <th>Mapel</th> <th>Nilai</th>
</tr>
<tr> <td>Bejo</td> <td>Matematika</td> <td>85</td>
</tr>
</table>

Atribut ini sangat berguna untuk tabel jadwal, laporan keuangan, atau struktur data yang punya kelompok. Jika ingin mendalami, dokumentasi resmi tabel HTML di MDN menjelaskan semua atribut dan elemennya secara lengkap.

Kesalahan Umum Saat Membuat Tabel

Berdasarkan pengalaman mengajar dan meninjau kode orang lain, ini kesalahan yang paling sering muncul:

• Jumlah kolom tidak konsisten antar baris. Satu baris punya 3 <td>, baris lain 2 — hasilnya tabel terlihat patah. Selalu hitung ulang kolom setiap baris.
• Lupa menutup tag. <td> atau <tr> yang tidak ditutup bisa membuat browser menebak-nebak struktur dan hasilnya kacau.
• Memakai tabel untuk layout. Sudah dibahas di atas — hindari, kecuali untuk konten email lama yang memang masih membutuhkan tabel.
• Tidak memakai <th> untuk header. Header yang hanya berupa <td> biasa menyulitkan aksesibilitas dan styling.
• Tanpa styling sama sekali. Tabel tanpa border dan padding sulit dibaca, apalagi jika berisi banyak baris.
• Tabel terlalu lebar untuk ponsel. Data dengan banyak kolom akan menciut atau meluber. Solusinya: bungkus dengan kontainer yang bisa di-scroll, atau tampilkan versi ringkas untuk layar kecil.

Kapan Tabel Bukan Pilihan Terbaik?

Tidak semua data harus memakai tabel. Beberapa alternatif yang perlu dipertimbangkan:

• List sederhana — gunakan <ul> atau <ol> jika data hanya berupa satu kolom tanpa nilai pembanding.
• Kartu (cards) — untuk profil orang atau produk, kartu dengan CSS Grid lebih fleksibel dan menarik.
• Grafik — jika tujuannya menunjukkan tren atau perbandingan visual, chart lebih komunikatif daripada tabel angka mentah.

Tabel tetap juara ketika pengguna perlu membandingkan nilai secara horizontal atau mencari baris tertentu — misalnya daftar harga, jadwal, atau skor.

Rangkuman

Membuat tabel di HTML ternyata sederhana jika Anda paham struktur dasarnya. Poin-poin yang perlu diingat:

• Tiga tag inti: <table>, <tr>, dan <td>.
• Gunakan <th> untuk header dan <thead>/<tbody> untuk struktur yang lebih jelas.
• Bangun tabel bertahap: kerangka, baris, kolom, lalu isi.
• Gunakan rowspan dan colspan untuk sel yang membentang.
• Perindah dengan CSS: border-collapse, padding, dan warna selang-seling.
• Gunakan tabel untuk data tabular, bukan untuk layout halaman.
• Pastikan jumlah kolom konsisten dan tag selalu tertutup.

Sekarang cobalah praktik sendiri: buat tabel jadwal harian Anda, tambahkan header, lalu beri styling CSS sederhana. Semakin sering berlatih, semakin natural rasanya. Selamat mencoba!

Hal yang sering ditanyakan seputar Membuat Tabel HTML Dasar