Apa Itu HTML Rowspan? Fungsi dan Cara Pemakaiannya

HTML rowspan adalah atribut penting yang sering digunakan saat membuat tabel di HTML. Dengan rowspan, kamu bisa membuat sel tabel yang membentang ke beberapa baris sehingga tampilan tabel jadi lebih rapi dan mudah dipahami.

Yuk, simak fungsi dan cara menggunakan HTML rowspan dengan contoh sederhana supaya kamu bisa langsung praktek dan mempercantik tampilan tabel di website kamu!

Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025

Apa Itu HTML Rowspan?

HTML Rowspan adalah atribut dalam HTML yang digunakan pada elemen <td> atau <th> untuk menggabungkan beberapa baris dalam sebuah tabel. 

Dengan menggunakan rowspan, satu sel dapat membentang ke beberapa baris secara vertikal, sehingga tabel terlihat lebih rapi dan terstruktur. 

Fitur ini sangat berguna saat kamu ingin mengelompokkan data yang memiliki hubungan antar baris. 

Jadi, HTML rowspan membantu membuat tampilan tabel menjadi lebih jelas dan mudah dipahami oleh pembaca.

Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat

Fungsi HTML Rowspan

Setelah tahu HTML rowspan, penting juga kenali fungsi utamanya. Rowspan membuat tabel lebih terstruktur dan mudah dibaca. Yuk, simak!

1. Menggabungkan Sel Vertikal

Fungsi utama rowspan adalah menggabungkan beberapa sel pada kolom yang sama secara vertikal. 

Dengan ini, kamu bisa menampilkan data yang berkaitan dalam satu sel panjang. Ini membuat tabel jadi lebih ringkas dan mudah dipahami.

2. Memperjelas Hubungan Data

Rowspan membantu memperjelas hubungan antar data yang berada di baris berbeda tapi dalam satu kategori. 

Misalnya, mengelompokkan data yang sama dalam satu kolom agar tidak terulang-ulang. Hal ini memudahkan pembaca untuk melihat keterkaitan informasi secara langsung.

3. Membuat Tampilan Tabel Lebih Rapi

Penggunaan rowspan membuat tampilan tabel terlihat lebih bersih dan teratur. Sel yang digabungkan secara vertikal menghindari pengulangan data yang tidak perlu. Dengan begitu, tabel kamu jadi lebih profesional dan enak dilihat.

Baca juga : Cara Membuat Website dengan HTML dan CSS Langkah Mudah

Cara Menggunakan HTML Rowspan

Sumber: Canva

Setelah tahu fungsi HTML rowspan, coba lihat contoh sederhana berikut. Misalnya, kamu ingin menggabungkan nama siswa di tabel agar lebih rapi dan tidak berulang. Dengan rowspan, tampilan tabel jadi lebih terstruktur dan jelas.

Berikut langkah menggunakan rowspan agar nama “Andi” cukup ditulis sekali dan membentang ke dua baris:

1. Tentukan Jumlah Baris yang Digabung

Gunakan atribut rowspan="2" untuk menyatukan sel ke dua baris vertikal. Ini membuat satu sel menutupi beberapa baris sekaligus. Pastikan jumlah baris yang digabung sesuai kebutuhan agar tampilan tabel tetap rapi.

2. Pasang Rowspan pada Elemen <td> yang Tepat

Atribut rowspan ditempatkan di tag <td> pada sel yang ingin digabung. Dalam contoh, sel nama “Andi” pada baris pertama diberi atribut ini. Hal ini memberi tahu browser untuk membentang sel ke baris berikutnya.

3. Sesuaikan Sel di Baris Berikutnya

Karena sel “Andi” sudah membentang dua baris, kamu harus menghapus atau mengosongkan sel nama di baris kedua agar tidak duplikat. 

Jika tidak, tabel akan terlihat tidak rapi dan berantakan. Ini memastikan data dalam tabel tersusun dengan benar.

Contoh Kode HTML dengan Rowspan:

Tabel Setelah Menggunakan Rowspan:

Baca juga : Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula

Perbedaan Rowspan dan Colspan

Sumber: Canva

Setelah memahami cara menggunakan rowspan, penting juga tahu bedanya dengan atribut lain yang sering dipakai dalam tabel HTML, yaitu colspan. 

Kedua atribut ini punya fungsi yang berbeda walaupun sama-sama untuk menggabungkan sel. Yuk, MinDi jelaskan perbedaan utama antara rowspan dan colspan!

1. Arah Penggabungan Sel

Rowspan menggabungkan sel secara vertikal, yaitu membentang ke beberapa baris. Sedangkan colspan menggabungkan sel secara horizontal, membentang ke beberapa kolom. 

Jadi, jika kamu ingin menggabungkan sel ke bawah, gunakan rowspan; kalau ke samping, pakai colspan.

2. Penggunaan dalam Tabel

Rowspan biasanya dipakai untuk mengelompokkan data dalam satu kolom agar tidak terulang-ulang pada baris yang berbeda. 

Colspan digunakan saat kamu ingin membuat judul atau header yang melewati beberapa kolom. Contohnya, header kategori yang mencakup beberapa subkategori dalam tabel.

3. Sintaks Penulisan

Penulisan rowspan dan colspan hampir sama, yakni sebagai atribut dalam tag <td> atau <th>. 

Contoh: <td rowspan="2"> untuk gabung vertikal dan <td colspan="3"> untuk gabung horizontal. Memahami perbedaan ini membantu kamu membuat tabel yang lebih rapi dan mudah dipahami.

Baca juga : Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula

Ingin Jadi Web Developer Profesional?

Setelah memahami dasar-dasar HTML seperti penggunaan rowspan, kini saatnya kamu memperdalam skill coding untuk membuat website yang menarik dan fungsional! 

Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan belajar HTML, CSS, JavaScript, dan teknologi web modern lainnya secara aplikatif dan praktis.

Belajar langsung dari mentor berpengalaman dengan kurikulum yang dirancang untuk membantumu menciptakan website profesional dan siap kerja. 

Dengan dukungan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni mencapai 95%, peluang kariermu di dunia IT semakin terbuka lebar!

Jadi, tunggu apa lagi? Hubungi di sini dan daftar sekarang di dibimbing.id untuk mulai perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!

Referensi

1. HTML Table Colspan & Rowspan [Buka]
2. HTML rowspan Attribute [Buka]