Membuat Tabel Kompleks HTML: Panduan Lengkap rowspan dan colspan

Membuat tabel kompleks HTML sering terasa menakutkan bagi pemula — apalagi saat harus menggabungkan sel ke bawah atau ke samping menggunakan rowspan dan colspan. Padahal, begitu Anda memahami dua atribut ini, tabel yang tampak rumit hanyalah kumpulan baris dan kolom yang disusun dengan pola sederhana. Artikel ini akan memandu Anda langkah demi langkah, dari tabel kosong sampai tabel dengan header ganda dan sel yang membentang, lengkap dengan contoh kode yang bisa langsung Anda coba. Selain itu, Anda juga akan belajar menghitung rowspan dan colspan dengan benar, mempercantik tabel lewat CSS, membuatnya tetap responsif di layar kecil, sampai memastikan tabel mudah dibaca oleh pengguna screen reader.

Apa Itu rowspan dan colspan pada Tabel Kompleks HTML?

Sebelum menulis kode, ada baiknya Anda memahami dua atribut yang menjadi jantung dari tabel kompleks ini:

• rowspan — menggabungkan beberapa sel secara vertikal (ke bawah). Nilai rowspan="2" berarti sel tersebut membentang menutupi dua baris sekaligus.
• colspan — menggabungkan beberapa sel secara horizontal (ke samping). Nilai colspan="4" berarti sel tersebut membentang menutupi empat kolom.

Analoginya begini: bayangkan Anda sedang merakit puzzle. Setiap potongan harus pas di tempatnya. Jika ada potongan yang lebih besar dari satu kotak — misalnya menutupi dua baris atau empat kolom — itulah kerja rowspan dan colspan. Keduanya memungkinkan satu sel “meminjam” area sel lain sehingga tabel bisa menyajikan data berlapis tanpa harus mengulang-ulang teks yang sama.

Kapan Anda Sebenarnya Butuh Tabel Kompleks?

Dalam praktik sehari-hari, tabel kompleks muncul di banyak tempat tanpa kita sadari. Beberapa contoh paling umum:

• Jadwal pelajaran atau shift kerja — kolom hari digabung ke bawah ketika satu orang menangani beberapa jam berturut-turut, atau jam digabung ke samping ketika satu sesi mencakup beberapa mata pelajaran.
• Laporan keuangan — kelompok kategori digabung ke samping (misalnya “Pemasukan” mencakup beberapa kolom), sementara sub-kategori digabung ke bawah.
• Perbandingan produk — satu fitur digabung ke bawah mencakup beberapa varian, atau satu varian digabung ke samping mencakup beberapa spesifikasi.
• Data penjualan bulanan — nama produk digabung ke bawah, sementara rentang bulan digabung ke samping sebagai header kolom.

Intinya, setiap kali data Anda punya hierarki dua tingkat — kategori di atas, sub-kategori di bawahnya — tabel kompleks adalah alat yang paling tepat untuk menampilkannya secara ringkas.

Contoh Tabel Kompleks yang Akan Kita Buat

Berikut target kita: tabel dengan kolom “Nama” yang digabung ke bawah (rowspan) dan kolom “BULAN” yang digabung ke samping (colspan).

Perhatikan struktur barisnya: baris pertama berisi dua sel besar (Nama dan BULAN), baris kedua berisi empat sel bulan, lalu baris ketiga sampai kelima berisi lima sel data. Pola inilah yang nanti kita bangun dari nol.

Langkah demi Langkah Membuat Tabel Kompleks HTML

Kita akan membangun tabel di atas secara bertahap. Agar mudah diikuti, kita fokuskan sampai baris LUTVI saja; baris berikutnya tinggal mengulang pola yang sama.

1. Mulai dari tag table dasar

<table>
</table>

Setiap tabel HTML selalu dimulai dari pasangan tag <table> ini. Semua baris dan sel nantinya berada di dalamnya.

2. Tambahkan baris dengan tag tr

Kita butuh tiga baris: baris header, baris sub-header, dan baris data. Setiap baris dibungkus dengan tag <tr> (table row):

<table> <tr> </tr> <tr> </tr> <tr> </tr>
</table>

3. Gabungkan sel ke bawah dengan rowspan

Sel pertama di baris pertama harus membentang sampai baris kedua. Karena itu kita beri atribut rowspan="2":

<table> <tr> <td rowspan="2"></td> </tr> <tr> </tr> <tr> </tr>
</table>

Perhatikan satu hal penting: baris kedua tidak lagi memiliki kolom pertama, karena kolom itu sudah “diambil alih” oleh rowspan di baris pertama. Inilah kunci yang sering bikin orang bingung — setelah rowspan, jumlah sel di baris berikutnya otomatis berkurang satu.

4. Gabungkan sel ke samping dengan colspan

Sel kedua di baris pertama harus membentang menutupi empat kolom, jadi kita pakai colspan="4":

<table> <tr> <td rowspan="2"></td> <td colspan="4"></td> </tr> <tr> </tr> <tr> </tr>
</table>

5. Lengkapi isi tabel

Sekarang tinggal mengisi setiap <td> dengan teks yang diinginkan, dan inilah hasil akhirnya:

<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">BULAN</td>
</tr>
<tr>
<td>Januari</td>
<td>Februari</td>
<td>Maret</td>
<td>April</td>
</tr>
<tr>
<td>LUTVI</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
<td>10.000</td>
</tr>
</table>

Trik Menghitung rowspan dan colspan Tanpa Pusing

Kesalahan paling umum saat membuat tabel kompleks adalah salah menghitung jumlah baris dan kolom. Trik sederhana yang sering saya pakai:

Untuk rowspan: Hitung dari SEL SAAT INI ke bawah Termasuk baris saat ini sendiri! Contoh: rowspan="3" = sel ini + 2 baris di bawahnya = 3 sel total Untuk colspan: Hitung dari SEL SAAT INI ke kanan Termasuk kolom saat ini sendiri! Contoh: colspan="4" = sel ini + 3 kolom di kanannya = 4 sel total

Setelah selesai menulis, selalu verifikasi dengan hitungan sederhana: total kolom visual di setiap baris harus sama. Jika baris pertama punya colspan="4" ditambah satu sel biasa, maka baris lain juga harus berjumlah lima kolom visual.

Mempercantik Tabel Kompleks dengan CSS

Tabel polos memang berfungsi, tapi tampilannya kurang menarik. Berikut contoh CSS sederhana untuk membuat tabel Anda terlihat lebih profesional:

/* Styling dasar tabel */
table { width: 100%; border-collapse: collapse; /* Menghilangkan spasi antar border */ font-family: Arial, sans-serif;
} /* Styling header tabel */
tr:first-child td { background-color: #4CAF50; color: white; font-weight: bold;
} /* Styling semua sel */
td { border: 1px solid #ddd; padding: 8px 12px; text-align: center;
} /* Efek hover */
tr:hover td { background-color: #f5f5f5;
} /* Zebra striping */
tr:nth-child(even) td { background-color: #f9f9f9;
}

Cukup tempel kode CSS ini di bagian <head> halaman Anda, tabel langsung terlihat lebih rapi dan mudah dipindai oleh pembaca.

Membuat Tabel Kompleks Tetap Responsif

Masalah terbesar tabel kompleks adalah tampilannya di layar kecil. Di desktop, tabel dengan lima sampai enam kolom terlihat sempurna. Di ponsel, kolom bisa terpotong atau mengecil sampai tidak terbaca. Salah satu solusi paling praktis adalah membungkus tabel dalam container dengan overflow horizontal:

/* Container untuk tabel responsif */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* scrolling halus di iOS */
} /* Mencegah tabel menyusut */
.table-responsive table { min-width: 600px; /* lebar minimum tabel */
}

<div class="table-responsive"> <table> <!-- isi tabel Anda --> </table>
</div>

Cara ini paling mudah diterapkan dan tidak mengubah struktur tabel sama sekali. Pengguna cukup menggeser layar ke samping untuk melihat kolom yang tersembunyi.

Aksesibilitas: Tabel yang Ramah Screen Reader

Tabel kompleks bisa sangat sulit dipahami oleh pengguna screen reader jika tidak ditandai dengan benar. Beberapa atribut yang membantu:

<table> <caption>Data Keuangan Bulanan</caption> <tr> <th rowspan="2" scope="rowgroup">Nama</th> <th colspan="4" scope="colgroup">BULAN</th> </tr> <tr> <th scope="col">Januari</th> <th scope="col">Februari</th> <th scope="col">Maret</th> <th scope="col">April</th> </tr> <tr> <th scope="row">LUTVI</th> <td>10.000</td> <td>10.000</td> <td>10.000</td> <td>10.000</td> </tr>
</table>

Gunakan <th> untuk header, scope="row" untuk header baris, dan scope="col" untuk header kolom. Elemen <caption> memberi judul pada tabel. Dengan cara ini, screen reader bisa membacakan hubungan antara data dan headernya dengan benar. Anda bisa mempelajari lebih lanjut di dokumentasi resmi MDN Web Docs dan panduan W3C Web Accessibility Initiative.

Kesalahan Umum yang Sering Terjadi

• Salah hitung jumlah kolom — Jika baris pertama punya colspan="4" dan baris kedua punya empat kolom biasa, total kolom visual tetap lima (kolom “Nama” + empat kolom bulan). Pastikan setiap baris konsisten.
• Lupa mengurangi kolom setelah rowspan — Jika kolom pertama sudah diambil oleh rowspan, baris berikutnya harus mengurangi jumlah <td>.
• Tidak menutup tag dengan benar — Tag <td> atau <tr> yang tidak ditutup bisa merusak seluruh struktur tabel di browser.
• Mengabaikan aksesibilitas — Tabel kompleks sebaiknya memakai atribut scope atau headers agar bisa dibaca screen reader.
• Memakai tabel untuk data yang bukan matriks — Tabel hanya tepat untuk data berbentuk baris dan kolom. Untuk konten berbentuk daftar atau kartu, gunakan elemen lain.

Kapan Sebaiknya Menghindari Tabel Kompleks?

Tabel kompleks memang powerful, tapi tidak selalu menjadi pilihan terbaik. Pertimbangkan alternatif lain dalam situasi berikut:

• Data sangat panjang (lebih dari sepuluh baris). Pertimbangkan library JavaScript seperti DataTables yang menyediakan sorting, searching, dan pagination otomatis.
• Data perlu diupdate secara dinamis. Jika data berubah sering, ambil dari API dan render dengan JavaScript. Ini menghindari edit HTML manual setiap kali data berubah.
• Data tidak berbentuk matriks. Jika lebih cocok disajikan sebagai daftar atau kartu, gunakan CSS Grid atau Flexbox.
• Butuh interaksi tinggi. Untuk sorting, filtering, atau editing inline, gunakan framework seperti React atau Vue dengan library tabel yang sesuai.

Ingat: tabel adalah alat untuk menyajikan data berbentuk matriks. Memaksakan tabel pada data yang tidak berbentuk matriks justru membuat presentasi menjadi lebih buruk.

Kesimpulan

• rowspan menggabungkan sel secara vertikal, colspan secara horizontal.
• Setelah memakai rowspan, baris berikutnya harus mengurangi jumlah kolom.
• Selalu hitung total kolom di setiap baris untuk menjaga konsistensi.
• Tambahkan CSS agar tabel tampil lebih menarik dan profesional.
• Gunakan atribut aksesibilitas (scope, <th>, <caption>) agar tabel mudah dibaca semua orang.

Selamat mencoba! Bagi pemula yang baru belajar membuat tabel kompleks HTML, mulailah dari struktur sederhana dengan satu atribut terlebih dahulu — misalnya rowspan saja — lalu tambahkan colspan secara bertahap setelah polanya terasa familiar. Sekali Anda memahami polanya, membuat tabel kompleks HTML akan terasa seperti menyusun puzzle: menantang tapi menyenangkan. Teruslah berlatih, karena kemampuan menyusun tabel kompleks HTML dengan rapi adalah keterampilan yang akan sering terpakai dalam proyek web nyata. Pelajari juga tutorial HTML lainnya di infanthree.com untuk terus mengasah keterampilan Anda.

Hal yang sering ditanyakan seputar Tabel Kompleks HTML