Tabel rapi menempatkan satu sel di tiap persimpangan baris dan kolom. Data nyata kadang menuntut sel yang lebih luas: satu label “Libur” yang membentang tiga kolom jadwal, satu nama guru yang mengisi dua jam kelas. HTML menjawab kebutuhan itu dengan dua atribut penggabung: colspan untuk arah horizontal dan rowspan untuk arah vertikal.

Chapter ini membahas keduanya, lalu membongkar kesalahan paling umum dalam pemakaiannya.

Colspan: Melebar ke Kanan #

Aturannya: colspan diletakkan pada td atau th; nilainya adalah jumlah sel yang digabung. Sel dengan colspan="3" menempati ruang tiga kolom sekaligus. Mekanismenya: browser menghitung lebar sel hasil gabungan sebagai jumlah lebar kolom yang dilalui, lalu baris berikutnya kembali ke susunan kolom normal.

Contohnya, baris libur pada jadwal kelas mingguan:

html 
<table>
  <caption>Jadwal kelas mingguan Kedai Kopi Siti</caption>
  <tr>
    <th>Jam</th>
    <th>Kelas</th>
    <th>Guru</th>
  </tr>
  <tr>
    <td>09.00</td>
    <td>Basic Espresso</td>
    <td>Siti</td>
  </tr>
  <tr>
    <td colspan="3">Libur — pelatihan barista</td>
  </tr>
  <tr>
    <td>13.00</td>
    <td>Kopi Tubruk</td>
    <td>Budi</td>
  </tr>
</table>

Hasil Render:

Mari kita telaah bagian penggabungannya:

  1. <td colspan="3">: satu sel menggantikan tiga sel pada baris itu — “Libur” membentang kolom Jam sampai kolom Guru.
  2. Hanya satu td pada baris itu: karena selnya melebar, baris ini tidak membutuhkan dua td lagi — itulah inti penggabungan.

Rowspan: Melebar ke Bawah #

Aturannya sama, arahnya berbeda: rowspan membuat sel melebar ke bawah sebanyak nilai atributnya. Contoh jadwal kelas siang dengan satu guru mengajar dua jam berurutan:

html 
<table>
  <caption>Jadwal kelas siang</caption>
  <tr>
    <th>Jam</th>
    <th>Kelas</th>
    <th>Guru</th>
  </tr>
  <tr>
    <td>09.00</td>
    <td>Basic Espresso</td>
    <td rowspan="2">Siti</td>
  </tr>
  <tr>
    <td>10.30</td>
    <td>Latte Art</td>
  </tr>
  <tr>
    <td>13.00</td>
    <td>Kopi Tubruk</td>
    <td>Budi</td>
  </tr>
</table>

Hasil Render (tanda (digabung) menandai area sel Siti yang melebar dari baris di atasnya):

Bedah selnya perlu ketelitian ekstra:

  1. <td rowspan="2">Siti</td>: sel “Siti” melebar dua baris — menjadi milik baris 09.00 sekaligus baris 10.30.
  2. Baris 10.30 hanya dua td: sel ketiga sudah ditempati warisan “Siti” dari baris di atasnya — menulis td ketiga justru menambah kolom baru yang tidak dimaksudkan.
  3. Jumlah sel efektif tiap baris tetap tiga: baris 10.30 memuat dua sel tertulis ditambah satu sel warisan rowspan.

Kesalahan Umum: Sel yang Digabung Tetap Ditulis #

Kesalahan paling sering terjadi: penulis tetap menyertakan sel yang seharusnya digantikan rowspan:

html 
<tr>
  <td>09.00</td>
  <td>Basic Espresso</td>
  <td rowspan="2">Siti</td>
</tr>
<tr>
  <td>10.30</td>
  <td>Latte Art</td>
  <td>Siti</td>
</tr>

Sel “Siti” kedua tidak menempati ruang yang sudah diambil rowspan — browser menempatkannya sebagai kolom keempat yang muncul tiba-tiba; kolom itu kosong pada baris-baris lain sehingga tabel tampak miring. Perbaikannya satu langkah: hapus td tersebut.

Ringkasan #

  • colspan menggabung sel ke kanan; rowspan menggabung sel ke bawah; nilai atribut = jumlah sel yang digabung.
  • Sel yang digantikan penggabungan tidak ditulis lagi — menulisnya tetap menumbuhkan kolom liar.
  • Jaga jumlah sel efektif per baris tetap konsisten; hitung manual bila perlu.

Judul yang tepat untuk sel yang tepat — itulah tugas atribut scope pada chapter berikutnya.