Colspan (colspan) dan rowspan (rowspan) adalah atribut dalam HTML yang digunakan untuk menggabungkan sel tabel secara horizontal (colspan) atau vertikal (rowspan). Atribut ini diterapkan pada tag <td> atau <th> untuk menciptakan struktur tabel yang lebih kompleks. Contohnya, colspan="2" menggabungkan dua kolom menjadi satu sel, sedangkan rowspan="3" menggabungkan tiga baris. Penggabungan sel berguna untuk membuat header yang mencakup beberapa kolom/baris atau menyusun data yang memiliki hierarki.

Perencanaan struktur tabel sangat penting saat menggunakan colspan dan rowspan untuk menghindari ketidakseimbangan jumlah sel per baris. Jika penggabungan tidak dihitung dengan tepat, tabel bisa menjadi tidak rapi atau rusak. Selalu pastikan total sel dalam baris setelah penggabungan sesuai dengan lebar tabel yang ditentukan.

Contoh Implementasi colspan dan rowspan

Contoh 1: Menggunakan colspan untuk Header

<table border="1">
  <tr>
    <th colspan="2">Data Mahasiswa</th>
  </tr>
  <tr>
    <td>NIM</td>
    <td>Nama</td>
  </tr>
</table>

Hasil: Header “Data Mahasiswa” menggabungkan 2 kolom.

Contoh 2: Menggunakan rowspan untuk Kategori

<table border="1">
  <tr>
    <th rowspan="2">Mata Kuliah</th>
    <th>Semester 1</th>
  </tr>
  <tr>
    <td>Algoritma</td>
  </tr>
</table>

Hasil: Kolom “Mata Kuliah” menggabungkan 2 baris.

Contoh 3: Gabungan colspan dan rowspan

<table border="1">
  <tr>
    <th rowspan="2">No.</th>
    <th colspan="2">Nilai</th>
  </tr>
  <tr>
    <td>UTS</td>
    <td>UAS</td>
  </tr>
</table>

Hasil: “No.” menggabungkan 2 baris, “Nilai” menggabungkan 2 kolom.

Contoh 4: Tabel Jadwal dengan CSS

<style>
  .jadwal {
    border-collapse: collapse;
    width: 70%;
  }
  .jadwal td, .jadwal th {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }
  .jadwal th {
    background-color: #e0e0e0;
  }
</style>

<table class="jadwal">
  <tr>
    <th rowspan="2">Hari</th>
    <th colspan="2">Waktu</th>
  </tr>
  <tr>
    <th>Pagi</th>
    <th>Sore</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>Rapat</td>
    <td>Pelatihan</td>
  </tr>
</table>

Hasil: Tabel jadwal dengan header “Hari” menggabungkan 2 baris dan “Waktu” 2 kolom, diberi CSS untuk border dan warna.

Contoh 5: Tabel Laporan Kompleks

<table border="1">
  <tr>
    <th rowspan="2">Departemen</th>
    <th colspan="3">Kinerja</th>
  </tr>
  <tr>
    <td>Target</td>
    <td>Aktual</td>
    <td>Selisih</td>
  </tr>
  <tr>
    <td>IT</td>
    <td>100%</td>
    <td>95%</td>
    <td>-5%</td>
  </tr>
</table>

Hasil: “Departemen” menggabungkan 2 baris, “Kinerja” menggabungkan 3 kolom.

Catatan Penting

• Hindari Overlapping: Pastikan total colspan dan rowspan tidak melebihi jumlah kolom/baris yang tersedia.
• Gunakan CSS: Untuk memperjelas tampilan sel yang digabung, tambahkan padding atau warna latar.
• Tes Responsivitas: Pada layar kecil, tabel dengan sel digabung mungkin memerlukan penyesuaian (misal: overflow-x: auto).