Tabel: colspan dan rowspan

Kenapa Sel Perlu Digabung

Tabel di dunia nyata jarang berbentuk kotak sempurna. Lihat jadwal pelajaran di mading sekolah: baris paling atas biasanya satu kotak lebar bertuliskan nama hari yang menaungi beberapa kolom jam pelajaran di bawahnya. Atau daftar harga katering: kolom "Kategori" berisi satu sel tinggi bertuliskan "Paket" yang menaungi tiga baris menu. Tanpa kemampuan menggabungkan sel, kamu terpaksa mengulang teks yang sama berkali-kali atau membuat tabel yang membingungkan. colspan dan rowspan adalah jawabannya.

Contoh 1: colspan (Sel Melebar ke Kanan)

colspan="2" membuat satu sel memakan 2 kolom sekaligus. Konsekuensinya: baris itu butuh satu td (atau th) lebih sedikit dari baris normal.

<table border="1">
  <tr>
    <th colspan="2">Menu Warkop</th>
  </tr>
  <tr>
    <td>Kopi Tubruk</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Es Teh</td>
    <td>Rp8.000</td>
  </tr>
</table>

Baris pertama hanya punya satu th, tapi karena colspan="2", ia melebar menutupi kedua kolom di bawahnya. Hasilnya judul "Menu Warkop" tampil di tengah, menaungi seluruh tabel. Pola ini sangat umum: judul tabel, nama bulan di kalender, atau nama hari di jadwal pelajaran.

Contoh 2: rowspan (Sel Memanjang ke Bawah)

rowspan="2" membuat satu sel memakan 2 baris sekaligus. Konsekuensinya: baris berikutnya butuh satu td lebih sedikit, karena satu kolomnya sudah "dipinjam".

<table border="1">
  <tr>
    <th>Kategori</th>
    <th>Menu</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td rowspan="2">Minuman</td>
    <td>Kopi Tubruk</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Es Teh</td>
    <td>Rp8.000</td>
  </tr>
  <tr>
    <td rowspan="2">Makanan</td>
    <td>Indomie</td>
    <td>Rp12.000</td>
  </tr>
  <tr>
    <td>Roti Bakar</td>
    <td>Rp10.000</td>
  </tr>
</table>

Perhatikan baris kedua dan keempat: masing-masing hanya punya dua td, bukan tiga. Kolom pertamanya sudah ditempati oleh sel rowspan dari baris di atasnya. Tanpa rowspan, kamu harus menulis kata "Minuman" dua kali dan "Makanan" dua kali, yang membuat tabel terlihat berulang dan kurang rapi.

Cara Berpikir yang Benar

Sebelum menulis kode, gambar grid-nya di kertas dulu. Tandai sel mana yang melebar ke kanan (colspan) dan mana yang memanjang ke bawah (rowspan). Lalu terapkan aturan hitungnya: di setiap baris, total "lebar sel" harus sama, di mana satu td normal bernilai 1 dan sel dengan colspan bernilai sesuai angkanya. Untuk rowspan, ingat bahwa baris di bawahnya "kehilangan" satu sel untuk tiap kolom yang dipinjam.

Kesalahan Umum Pemula

SALAH: lupa mengurangi jumlah sel setelah memakai colspan.

<tr>
  <th colspan="2">Menu Warkop</th>
  <td>Sel nyasar</td>
</tr>

Baris dengan colspan="2" seharusnya total lebarnya 2, tapi di sini ada tambahan td sehingga totalnya 3. Browser akan merender sel ekstra itu di kolom ketiga yang tidak ada di baris lain, dan tabelnya bergeser aneh. Setiap memakai colspan, kurangi jumlah sel di baris itu.

SALAH: menulis sel penuh di baris yang kolomnya sedang dipinjam rowspan.

<tr>
  <td rowspan="2">Minuman</td>
  <td>Kopi</td>
</tr>
<tr>
  <td>Kolom yang seharusnya kosong</td>
  <td>Teh</td>
</tr>

Baris kedua di sini punya 2 sel, padahal kolom pertamanya sudah dipinjam oleh rowspan dari baris pertama, jadi seharusnya cuma 1 sel ("Teh"). Kelebihan satu sel membuat seluruh kolom di bawahnya bergeser.

Catatan teknis: Kombinasi colspan dan rowspan yang rumit sangat rawan salah hitung, bahkan untuk programmer berpengalaman. Kalau tabelmu mulai butuh kertas coretan yang penuh, itu tanda tabelnya terlalu kompleks. Pertimbangkan memecahnya menjadi dua tabel sederhana. Tabel yang sederhana selalu menang.