HTML Dasar #10 - Menggabungkan Sel Tabel dengan colspan dan rowspan

byFerdian Rahabista -
0

Di artikel sebelumnya, kita sudah belajar membuat tabel dasar. Tapi bagaimana jika kita ingin membuat judul yang mencakup beberapa kolom (seperti "Data Diri" yang meliputi nama dan alamat)? Atau label yang mencakup beberapa baris (seperti "Kontak" yang meliputi email dan telepon)?

Di sinilah colspan dan rowspan berperan! Dua atribut ajaib ini memungkinkan kita menggabungkan sel layaknya menggabungkan sel di Excel atau Google Sheets.

Apa Itu colspan dan rowspan?

Atribut Fungsi Arah Gabung
colspan Menggabungkan kolom (melebar ke kanan) Horizontal
rowspan Menggabungkan baris (melebar ke bawah) Vertikal
Asal Kata:
• colspan = column + span (rentang kolom)
• rowspan = row + span (rentang baris)

colspan: Menggabungkan Kolom

colspan digunakan ketika kamu ingin satu sel melebar ke beberapa kolom. Angka dalam colspan menunjukkan berapa banyak kolom yang digabung.

Contoh Sederhana:

<table border="1">
    <tr>
        <th colspan="2">Data Siswa</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Andi</td>
    </tr>
    <tr>
        <td>Kelas</td>
        <td>10 A</td>
    </tr>
</table>

Hasilnya:

Data Siswa
Nama Andi
Kelas 10 A

Perhatikan: Hanya ada 1 sel di baris pertama (bukan 2 sel seperti biasa), karena colspan="2" menggabungkan 2 kolom menjadi 1.

rowspan: Menggabungkan Baris

rowspan digunakan ketika kamu ingin satu sel melebar ke beberapa baris ke bawah. Angka dalam rowspan menunjukkan berapa banyak baris yang digabung.

Contoh Sederhana:

<table border="1">
    <tr>
        <th>Nama</th>
        <td>Andi</td>
    </tr>
    <tr>
        <th rowspan="2">Kontak</th>
        <td>andi@email.com</td>
    </tr>
    <tr>
        <td>08123456789</td>
    </tr>
</table>

Hasilnya:

Nama Andi
Kontak andi@email.com
08123456789

Perhatikan: Sel "Kontak" memanjang ke bawah mencakup 2 baris (email dan telepon).

Penting! Saat menggunakan rowspan, kamu harus menghapus sel yang tertimpa di baris bawahnya. Pada contoh di atas, baris kedua hanya punya 1 <td> (bukan 2), karena sel pertama sudah "dipakai" oleh rowspan dari baris sebelumnya.

Studi Kasus: Struktur Organisasi Kelas

Buat file struktur-organisasi.html yang menggabungkan kedua teknik:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Struktur Organisasi Kelas 10 A</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f0f9ff;
        }
        .org-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .org-table th, .org-table td {
            border: 1px solid #ddd;
            padding: 12px;
            vertical-align: top;
        }
        .org-table th {
            background-color: #0284c7;
            color: white;
            font-weight: bold;
            text-align: center;
        }
        .org-table td {
            background-color: white;
        }
        .jabatan {
            background-color: #f0f9ff;
            font-weight: bold;
        }
        h1 {
            color: #0284c7;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>Struktur Organisasi Kelas 10 A</h1>

    <table class="org-table">
        <!-- Header Utama dengan colspan -->
        <tr>
            <th colspan="3">Pengurus Kelas 10 A - Periode 2024/2025</th>
        </tr>
        
        <!-- Sub Header -->
        <tr>
            <th>No</th>
            <th>Jabatan</th>
            <th>Nama</th>
        </tr>
        
        <!-- Baris 1: Ketua -->
        <tr>
            <td style="text-align: center;">1</td>
            <td class="jabatan">Ketua Kelas</td>
            <td>Ahmad Fauzan</td>
        </tr>
        
        <!-- Baris 2: Wakil Ketua -->
        <tr>
            <td style="text-align: center;">2</td>
            <td class="jabatan">Wakil Ketua</td>
            <td>Siti Nurhaliza</td>
        </tr>
        
        <!-- Sekretaris (menggabungkan 2 baris untuk bendahara 1 dan 2) -->
        <tr>
            <td style="text-align: center;">3</td>
            <td class="jabatan" rowspan="2">Sekretaris</td>
            <td>Dewi Anggraini</td>
        </tr>
        <tr>
            <td style="text-align: center;">4</td>
            <!-- td untuk jabatan sudah diisi rowspan dari atas -->
            <td>Rina Kusuma (Wakil Sekretaris)</td>
        </tr>
        
        <!-- Bendahara (menggabungkan 2 baris) -->
        <tr>
            <td style="text-align: center;">5</td>
            <td class="jabatan" rowspan="2">Bendahara</td>
            <td>Bagas Prasetyo</td>
        </tr>
        <tr>
            <td style="text-align: center;">6</td>
            <td>Citra Lestari (Wakil Bendahara)</td>
        </tr>
        
        <!-- Seksi-seksi (menggabungkan beberapa baris) -->
        <tr>
            <td style="text-align: center;">7</td>
            <td class="jabatan" rowspan="3">Seksi Kebersihan</td>
            <td>Eko Prasetyo (Koordinator)</td>
        </tr>
        <tr>
            <td style="text-align: center;">8</td>
            <td>Fajar Setiawan</td>
        </tr>
        <tr>
            <td style="text-align: center;">9</td>
            <td>Gina Febriyanti</td>
        </tr>
        
        <!-- Footer dengan colspan -->
        <tr>
            <td colspan="3" style="text-align: center; background: #f0f9ff;">
                Total Pengurus: 9 orang
            </td>
        </tr>
    </table>

</body>
</html>

Studi Kasus: Jadwal Pelajaran dengan Istirahat

Ini adalah contoh paling umum penggunaan colspan untuk menggabungkan kolom istirahat:

<!DOCTYPE html>
<html>
<head>
    <title>Jadwal Pelajaran</title>
    <style>
        .jadwal {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial;
        }
        .jadwal th, .jadwal td {
            border: 1px solid #333;
            padding: 10px;
            text-align: center;
        }
        .jadwal th {
            background-color: #3498db;
            color: white;
        }
        .istirahat {
            background-color: #f1c40f;
            font-weight: bold;
        }
        .mapel {
            background-color: #ecf0f1;
        }
    </style>
</head>
<body>

    <h2>Jadwal Pelajaran Kelas 10 A</h2>

    <table class="jadwal">
        <tr>
            <th>Jam</th>
            <th>Senin</th>
            <th>Selasa</th>
            <th>Rabu</th>
            <th>Kamis</th>
            <th>Jumat</th>
        </tr>
        <tr>
            <td>07:30 - 08:30</td>
            <td class="mapel">Matematika</td>
            <td class="mapel">Bahasa Indonesia</td>
            <td class="mapel">Fisika</td>
            <td class="mapel">Bahasa Inggris</td>
            <td class="mapel">Olahraga</td>
        </tr>
        <tr>
            <td>08:30 - 09:30</td>
            <td class="mapel">Matematika</td>
            <td class="mapel">Bahasa Indonesia</td>
            <td class="mapel">Fisika</td>
            <td class="mapel">Bahasa Inggris</td>
            <td class="mapel">Olahraga</td>
        </tr>
        
        <!-- colspan digunakan di sini! -->
        <tr class="istirahat">
            <td>09:30 - 10:00</td>
            <td colspan="5">WAKTU ISTIRAHAT (30 menit)</td>
        </tr>
        
        <tr>
            <td>10:00 - 11:00</td>
            <td class="mapel">Kimia</td>
            <td class="mapel">Sejarah</td>
            <td class="mapel">Biologi</td>
            <td class="mapel">PKN</td>
            <td class="mapel">Seni Budaya</td>
        </tr>
        <tr>
            <td>11:00 - 12:00</td>
            <td class="mapel">Kimia</td>
            <td class="mapel">Sejarah</td>
            <td class="mapel">Biologi</td>
            <td class="mapel">PKN</td>
            <td class="mapel">Seni Budaya</td>
        </tr>
        
        <tr class="istirahat">
            <td>12:00 - 13:00</td>
            <td colspan="5">WAKTU MAKAN SIANG & SHOLAT</td>
        </tr>
        
        <tr>
            <td>13:00 - 14:00</td>
            <td class="mapel">TIK</td>
            <td class="mapel">Prakarya</td>
            <td class="mapel">Bimbingan Konseling</td>
            <td class="mapel">Bahasa Jawa</td>
            <td class="mapel">Ekstrakurikuler</td>
        </tr>
    </table>

</body>
</html>

Studi Kasus Lanjutan: Menggabungkan colspan dan rowspan Sekaligus

Kita bisa menggunakan colspan DAN rowspan dalam satu tabel untuk struktur yang lebih kompleks.

<!DOCTYPE html>
<html>
<head>
    <title>Rekap Nilai Semester</title>
    <style>
        .nilai {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial;
        }
        .nilai th, .nilai td {
            border: 1px solid #333;
            padding: 10px;
            text-align: center;
        }
        .nilai th {
            background-color: #2c3e50;
            color: white;
        }
        .header-utama {
            background-color: #34495e;
        }
        .rata-rata {
            background-color: #f1c40f;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h2>Rekap Nilai Semester Ganjil 2024</h2>

    <table class="nilai">
        <!-- Header kompleks dengan colspan dan rowspan -->
        <tr>
            <th rowspan="2">No</th>
            <th rowspan="2">Nama Siswa</th>
            <th colspan="3">Nilai Mata Pelajaran</th>
            <th rowspan="2">Rata-rata</th>
        </tr>
        <tr>
            <th>Matematika</th>
            <th>Bahasa Inggris</th>
            <th>IPA</th>
        </tr>
        
        <!-- Data siswa -->
        <tr>
            <td>1</td>
            <td>Ahmad Fauzan</td>
            <td>85</td>
            <td>90</td>
            <td>88</td>
            <td class="rata-rata">87.7</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Siti Nurhaliza</td>
            <td>92</td>
            <td>88</td>
            <td>95</td>
            <td class="rata-rata">91.7</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bagas Prasetyo</td>
            <td>78</td>
            <td>82</td>
            <td>80</td>
            <td class="rata-rata">80.0</td>
        </tr>
        
        <!-- Footer dengan colspan -->
        <tr>
            <td colspan="5" style="text-align: right; background: #ecf0f1;"><strong>Rata-rata Kelas:</strong></td>
            <td class="rata-rata">86.5</td>
        </tr>
    </table>

</body>
</html>

Hasil tabel di atas (visualisasi):

No Nama Siswa Nilai Mata Pelajaran Rata-rata
Matematika Bahasa Inggris IPA
1 Ahmad Fauzan 85 90 88 87.7
2 Siti Nurhaliza 92 88 95 91.7
3 Bagas Prasetyo 78 82 80 80.0

Panduan Cepat colspan & rowspan

Situasi Solusi Contoh Kode
Judul utama di atas beberapa kolom colspan <th colspan="3">Judul</th>
Label kategori untuk beberapa baris rowspan <td rowspan="2">Kategori</td>
Header kompleks (baris dan kolom) colspan + rowspan Kombinasi kedua atribut
Menggabungkan sel istirahat di jadwal colspan <td colspan="5">Istirahat</td>

Kesalahan Umum Pemula

  • Lupa menghapus sel yang tertimpa rowspan → Kelebihan sel, tabel jadi berantakan
  • Jumlah kolom tidak konsisten → Misal colspan="3" tapi total kolom hanya 2
  • Rowspan melebihi batas tabel → Mencoba rowspan 3 tapi cuma ada 2 baris tersisa
  • Terlalu banyak rowspan/colspan → Sulit dibaca dan di-maintenance
  • Lupa memperhitungkan sel yang sudah digabung → Menghitung ulang jumlah kolom salah
Debugging Tips: Jika tabelmu terlihat aneh atau selnya tidak rapi, hitung ulang jumlah colspan dan rowspan. Pastikan setiap baris memiliki total kolom yang sama (termasuk sel yang digabung). Gambar dulu struktur tabel di kertas sebelum coding!

Latihan Singkat

  1. Buat file HTML baru dengan judul "Daftar Riwayat Hidup"
  2. Buat tabel dengan struktur berikut:
    • Header utama: "BIODATA" dengan colspan="2"
    • Baris 1: "Nama Lengkap" | "Andi Saputra"
    • Baris 2: "Tempat, Tgl Lahir" | "Jakarta, 15 Januari 2008"
    • Baris 3: "Alamat" dengan rowspan="2" | "Jl. Mawar No. 10"
    • Baris 4: (tidak ada kolom pertama) | "Jakarta Selatan"
  3. Simpan dan buka di browser, pastikan tampil rapi

Intisari Hari Ini

  • colspan="n" → menggabungkan n kolom ke kanan (horizontal)
  • rowspan="n" → menggabungkan n baris ke bawah (vertikal)
  • Saat pakai rowspan, hapus sel yang tertimpa di baris bawahnya
  • Setiap baris harus punya total kolom yang sama (termasuk sel yang digabung)
  • colspan dan rowspan bisa digunakan bersamaan dalam satu tabel
Tantangan Akhir Pekan: Buat sebuah tabel Rencana Anggaran Liburan yang kompleks. Tabel harus memiliki:
  • Header utama dengan colspan="4" berjudul "RENCANA ANGGARAN LIBURAN 2024"
  • Sub-header: Kategori, Item, Perkiraan Biaya, Keterangan
  • Kategori "Transportasi" dengan rowspan="3" berisi: Tiket Pesawat, Sewa Mobil, Bensin
  • Kategori "Akomodasi" dengan rowspan="2" berisi: Hotel, Makan
  • Kategori "Wisata" dengan rowspan="2" berisi: Tiket Masuk, Oleh-oleh
  • Baris footer dengan colspan="3" berisi "Total Anggaran" dan kolom terakhir berisi total biaya
Gunakan CSS untuk membuat tabel terlihat profesional. Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th
Artikel Selanjutnya: HTML Dasar #11 - Membuat Form (form) dan Method GET vs POST

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال