Pengertian Rowspan
Rowspan adalah atribut dalam HTML untuk menentukan jumlah baris yang harus dilintasi oleh sebuah sel. Jika sebuah sel memiliki rowspan dua baris, berarti sel tersebut akan mengisi ruang dari dua baris dalam tabel tersebut.
Atribut ini memungkinkan satu sel tabel untuk melintasi ketinggian lebih dari satu sel atau baris, memberikan fungsionalitas yang sama dengan "penggabungan sel" dalam Spreadsheet Excel.
Dalam tabel HTML, rowspan bisa dipakai bersama dengan elemen < td > dan < th >. Value yang diberikan pada atribut rowspan menunjukkan jumlah baris yang harus dilintasi oleh sel tersebut.
Rowspan sering digunakan saat ada konten yang berulang dalam tabel. Sebagai contoh, jika value yang diberikan adalah 2, satu sel akan mengisi ruang dari dua sel secara vertikal, dan seterusnya.
Atribut ini juga sudah didukung oleh berbagai browser seperti Chrome, Explorer, Firefox, dan Safari.
Fungsi Rowspan
Utamanya, fungsi rowspan dalam HTML adalah untuk menentukan jumlah baris yang harus dilintasi atau diisi oleh sebuah sel dalam tabel. Atribut ini dipakai untuk menggabungkan beberapa sel yang bersebelahan secara vertikal, memberikan tampilan lebih rapi dan terstruktur pada tabel.
Rowspan sangat berguna dalam situasi di mana ada konten berulang atau informasi sama yang perlu ditampilkan di beberapa baris berurutan. Jika dalam sebuah tabel ada kolom dengan nilai sama untuk beberapa baris, daripada menampilkan nilai tersebut berulang kali, rowspan akan menggabungkan sel-sel tersebut menjadi satu sel besar yang melintasi beberapa baris.
Selain membuat tampilan tabel lebih rapi, cara ini juga memudahkan pembacaan dan pemahaman informasi dalam tabel.
Contoh Penggunaan Rowspan pada Tabel HTML
Misalnya, ada tabel yang menampilkan daftar produk yang dijual di sebuah toko. Tabel tersebut berisi kategori produk dan harga.
Beberapa produk mungkin berada dalam kategori yang sama. Dibandingkan harus menulis nama kategori berulang kali untuk setiap produk, gunakan rowspan untuk menggabungkan sel-sel kategori.
Output:
Dalam contoh di atas, sel kategori "Elektronik" melintasi tiga baris untuk produk Laptop XYZ, Smartphone ABC, dan Headset DEF.
Sedangkan sel kategori "Pakaian" melintasi dua baris untuk produk Kemeja Formal dan Celana Jeans. Hal ini membuat tampilan tabel lebih rapi dan informasi kategori tidak perlu ditulis berulang kali untuk setiap produk yang berada di kategori yang sama.
FAQ (Frequently Asked Question)
Apa yang menyebabkan tabel rowspan berantakan?
Tabel dengan rowspan yang "berantakan" atau tidak ditampilkan dengan tepat biasanya disebabkan oleh beberapa alasan berikut:
- Kesalahan jumlah rowspan: jika nilai dari atribut rowspan tidak sesuai dengan jumlah baris yang sebenarnya ingin digabungkan, tabel bisa saja tampil berantakan.
- Kesalahan dalam penempatan sel (< td > atau < t h>): jika web developer melewatkan sel atau memberikan sel tambahan dalam baris yang menggunakan rowspan, struktur tabel akan terganggu.
- CSS tidak sesuai: styling CSS yang diterapkan pada tabel, seperti padding, margin, border, atau properti lainnya bisa menyebabkan tampilan tabel menjadi berantakan, terutama jika ada ketidaksesuaian antara sel yang menggunakan rowspan dengan sel lain.
- Kesalahan dalam struktur tabel: apabila struktur tabel (misalnya, jumlah < tr >, < td >, atau < th >) tidak konsisten atau ada kesalahan dalam penutupan tag, tabel dapat tampil tidak sesuai ekspektasi.
- Kombinasi dengan colspan: menggunakan rowspan bersamaan dengan colspan bisa saja membingungkan dan meningkatkan potensi kesalahan, terutama jika tidak dilakukan dengan hati-hati.
- Konten sel berbeda: saat konten dalam sel yang menggunakan rowspan memiliki tinggi berbeda dari sel lainnya, hal ini bisa menyebabkan sel tersebut "menyembul" keluar atau tidak sejajar dengan sel lain.
- Kesalahan dalam responsive design: ketika membuat tabel responsif untuk tampilan mobile atau tablet, penggunaan rowspan berpotensi menyulitkan proses tersebut dan menyebabkan tampilan tabel menjadi berantakan pada layar dengan lebar tertentu.
