colspan dan rowspan HTML: Cara Menggabungkan Sel Tabel

colspan: satu sel melintasi beberapa kolom

colspan="n" membuat sebuah sel selebar n kolom. Baris tempat sel itu berada lalu punya n - 1 sel lebih sedikit. Di sini total membentang di dua kolom pertama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

Baris terakhir punya dua sel, tapi sel pertama dihitung dua, jadi baris itu tetap berjumlah tiga kolom seperti baris lainnya.

rowspan: satu sel ke bawah melintasi beberapa baris

rowspan="n" membuat sebuah sel setinggi n baris. Baris di bawahnya melewatkan kolom itu, karena sel yang tinggi tadi sudah mengisinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Baris untuk Bob dan Cy hanya punya satu <td>: kolom Team sudah diisi oleh "Design". Tidak ada yang menandai hal itu di HTML, jadi baca tabel dengan rowspan dari atas ke bawah dan catat kolom mana yang masih tertutup.

colspan dan rowspan sekaligus: sebuah jadwal

Satu sel bisa membentang ke dua arah. Jadwal pelajaran adalah contoh klasiknya, dengan beberapa kelas yang berlangsung dua slot dan beberapa yang berjalan dua hari:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Hitung baris 10:00: header waktu, lalu Mon tertutup oleh HTML dari baris di atasnya, lalu Lab mengisi Tue dan Wed. Pada 11:00, Mon kosong lagi dan Lab masih menutupi Tue dan Wed, jadi baris itu punya satu sel data.

Menghitung sel supaya tabel tetap rapi

Setiap baris harus berjumlah kolom yang sama, dengan menghitung colspan setiap sel dan kolom yang tertutup oleh sel rowspan dari atas. Saat sebuah baris punya satu sel terlalu banyak, browser menambahkan kolom baru untuknya dan tepi tabel jadi tidak rata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

Di tabel yang salah, baris kedua lupa bahwa A menutupi kolom pertamanya, jadi D mendarat di kolom ketiga yang tidak dimiliki baris lain. Perbaikannya adalah menghapus satu sel. Kesalahan yang sama dengan colspan adalah tetap menyimpan semua sel asli di baris yang berisi sel lebar itu.

Kekurangan satu sel adalah masalah sebaliknya: barisnya berakhir terlalu cepat dan menyisakan lubang di ujungnya.

Header berkelompok dengan colspan

Sebuah header bisa membentang di atas kolom-kolom yang diberinya label, di atas baris header yang lebih spesifik. Tandai dengan scope="colgroup" supaya screen reader menerapkannya ke semua kolom di bawahnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" membentang di kedua baris header dengan rowspan="2", dan setiap bulan membentang di dua kolomnya dengan colspan="2". Elemen <colgroup> mendefinisikan kelompok kolom yang dirujuk oleh scope="colgroup". Screen reader di sel 31 milik Rome lalu bisa mengucapkan "Rome, July, High, 31". Untuk struktur tabel lainnya, lihat tabel HTML.

Pakai span hanya untuk struktur yang nyata

Span membuat tabel lebih sulit dibaca dengan screen reader dan lebih sulit diurutkan, difilter, atau disalin ke spreadsheet. Pakai span saat datanya memang berkelompok (total, header di atas sub-kolom, kelas yang berlangsung dua jam). Kalau sebuah tabel butuh banyak span, dua tabel yang lebih sederhana sering lebih jelas.

Kesalahan umum

• Membiarkan sel yang tertutup tetap ada. Sel colspan="2" menggantikan dua sel; hapus salah satu sel aslinya.
• Melupakan baris di bawah rowspan. Setiap baris itu butuh satu sel lebih sedikit.
• Menulis colspan di <tr>. Atribut ini hanya berfungsi di <td> dan <th>.
• Span untuk tata letak visual, seperti baris banner di tabel yang dipakai untuk tata letak halaman. Pakai CSS grid untuk tata letak.
• colspan="100%" untuk berarti "selebar penuh". Browser hanya membaca angka di awalnya, jadi sel ini membentang 100 kolom dan menambahkan kolom kosong ke tabel. Nilainya adalah jumlah kolom berupa bilangan bulat.