Jadwal kelas sering memuat pelajaran yang berlangsung dua jam berturut-turut, atau istirahat yang berlaku untuk seluruh kolom pada satu baris. Menggambar keadaan itu dengan sel biasa memaksa kita menulis teks yang sama berulang kali, dan tabelnya tetap tidak menceritakan maksud sebenarnya. HTML menyediakan atribut colspan dan rowspan untuk menyatukan sel, dan keduanya menuntut perhitungan yang cermat. Chapter ini membahas cara kerja kedua atribut, jebakan keseimbangan yang paling sering dialami pemula, serta pertimbangan kapan penggabungan sebaiknya dihindari.

colspan dan rowspan #

Atribut colspan membuat satu sel membentang beberapa kolom ke kanan, sedangkan rowspan membuat satu sel membentang beberapa baris ke bawah. Keduanya ditulis pada td maupun th dengan nilai berupa bilangan bulat; tanpa atribut tersebut, setiap sel membentang satu kolom dan satu baris. Browser memandang tabel sebagai kisi: sel biasa mengisi satu titik kisi, sedangkan sel dengan span mengisi beberapa titik sekaligus, sehingga titik-titik itu tidak boleh diberi sel lain.

Menjaga Keseimbangan Setiap Baris #

Kesalahan paling umum saat menggabungkan sel adalah melupakan slot yang terisi oleh span. Aturan praktisnya: jumlah slot efektif setiap baris harus sama dengan jumlah kolom. Slot efektif dihitung dari tiga sumber, yaitu sel biasa, sel dengan colspan yang bernilai lebih dari satu, dan slot warisan rowspan dari baris di atasnya.

Baris yang slotnya kurang menyisakan ruang kosong, sedangkan baris yang slotnya berlebih mendorong tabel melebar di luar rencana. Pemeriksa sintaks tidak menandai tabel yang selnya tidak seimbang, sehingga pemeriksaan ini menjadi tanggung jawab kita sendiri. Kebiasaan yang menolong: hitung slot tiap baris sebelum menutup tr, lalu uji tampilannya di browser setelah tabel selesai.

Contoh: Jadwal Kelas dengan Perhitungan Slot #

Kelas 7B memiliki empat kolom, yaitu kolom Jam dan tiga kolom hari. Pelajaran Bahasa Indonesia membentang Senin dan Selasa, sesi 08.00-09.30 berlaku untuk dua baris, dan baris istirahat menutup seluruh lebar. Simpan file berikut sebagai jadwal-kelas.html:

html jadwal-kelas.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Kelas 7B</title>
</head>
<body>
  <h1>Jadwal Kelas 7B</h1>
  <table>
    <tr>
      <th>Jam</th>
      <th>Senin</th>
      <th>Selasa</th>
      <th>Rabu</th>
    </tr>
    <tr>
      <th>07.00-08.00</th>
      <td colspan="2">Bahasa Indonesia</td>
      <td>IPA</td>
    </tr>
    <tr>
      <th rowspan="2">08.00-09.30</th>
      <td>Matematika</td>
      <td>IPS</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Seni Budaya</td>
      <td>Penjaskes</td>
      <td>Matematika</td>
    </tr>
    <tr>
      <td colspan="4">Istirahat</td>
    </tr>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Baris header empat kolom: Jam, Senin, Selasa, Rabu
  - Sel "Bahasa Indonesia" membentang dua kolom
  - Sel "08.00-09.30" membentang dua baris
  - Sel "Istirahat" membentang empat kolom

Berikut perhitungan slot baris demi baris, dengan lebar kisi empat kolom:

  1. Baris header (baris 11-16): empat th mengisi empat slot; kisi seimbang.
  2. Baris 07.00-08.00 (baris 17-21): satu th ditambah satu sel colspan="2" dan satu td; totalnya 1 + 2 + 1 = 4 slot.
  3. Baris 08.00-09.30 (baris 22-27): th dengan rowspan="2" mengisi satu slot pada baris ini dan menyisakan satu slot warisan untuk baris berikutnya; tiga td melengkapinya menjadi 4 slot.
  4. Baris kedua sesi (baris 28-32): slot kolom Jam telah terisi oleh warisan rowspan, sehingga cukup tiga td; 3 slot sendiri + 1 slot warisan = 4 slot.
  5. Baris istirahat (baris 33-35): satu sel dengan colspan="4" mengisi seluruh lebar; 1 sel = 4 slot.

Kapan Menghindari Penggabungan #

Penggabungan sel menaikkan kompleksitas tabel secara nyata bagi pembaca layar: relasi header-data tidak lagi berjalan lurus secara horizontal maupun vertikal, sehingga pengumuman sel menjadi lebih sulit diikuti. Pedoman aksesibilitas menyarankan tabel dengan struktur sederhana, dan penggabungan kita simpan untuk makna yang memang terkandung dalam data, seperti sesi ganda atau baris total.

Alternatifnya sering lebih sederhana dari yang kita duga: pecah satu tabel rumit menjadi beberapa tabel kecil yang masing-masing mudah dibaca. Jadwal dengan dan tanpa sesi ganda, misalnya, dapat disajikan dua tabel terpisah dengan header masing-masing. Dengan begitu, colspan dan rowspan kita pakai hanya pada kasus yang benar-benar membutuhkannya.

Kita kini menguasai seluruh elemen tabel: table, tr, td, th, caption, serta tiga elemen pengelompokan baris. Sisa tugas kita pada section ini adalah merangkum semuanya dari sisi aksesibilitas, termasuk atribut headers dan id untuk header yang paling kompleks.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

jadwal-kelas.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal Kelas 7B</title>
</head>
<body>
  <h1>Jadwal Kelas 7B</h1>
  <table>
    <tr>
      <th>Jam</th>
      <th>Senin</th>
      <th>Selasa</th>
      <th>Rabu</th>
    </tr>
    <tr>
      <th>07.00-08.00</th>
      <td colspan="2">Bahasa Indonesia</td>
      <td>IPA</td>
    </tr>
    <tr>
      <th rowspan="2">08.00-09.30</th>
      <td>Matematika</td>
      <td>IPS</td>
      <td>Prakarya</td>
    </tr>
    <tr>
      <td>Seni Budaya</td>
      <td>Penjaskes</td>
      <td>Matematika</td>
    </tr>
    <tr>
      <td colspan="4">Istirahat</td>
    </tr>
  </table>
</body>
</html>