Apa itu Rowspan?

Atribut rowspan adalah fitur hypertext markup language ( HTML ) yang memungkinkan sel tabel di halaman web diperluas ke beberapa baris. HTML adalah salah satu cara utama di mana halaman web dibuat. Biasanya, browser web menerjemahkan kode HTML yang dikirim oleh situs web dan menampilkan hasilnya di layar komputer dalam format yang dapat dibaca. HTML menggabungkan konsep tabel untuk mengatur konten pada halaman.

Dalam HTML, rowspan memungkinkan sel dalam tabel untuk diperpanjang lebih dari beberapa baris.

Sebuah tabel memiliki beberapa baris dan kolom yang mengatur informasi secara vertikal dan horizontal. Saat menampilkan tabel HTML, seseorang sering ingin satu item konten diterapkan atau tersebar di beberapa baris. Dalam sebuah tabel, rowspan=N – di mana N adalah angka seperti 2, 3, dst. – menunjukkan bahwa sel menyebar ke banyak baris tersebut.

Pertimbangkan contoh di mana data penjualan ditampilkan sebagai tabel dengan tiga judul kolom: wilayah penjualan, orang yang memimpin wilayah, dan jumlah penjualan. Wilayah Selatan mengalami pergantian kepala selama periode perekaman; jumlah masing-masing harus diatribusikan kepada kedua orang tersebut. Kode berikut mencapai ini.

<html>
<table border=”1″>

<tr>
<th>Wilayah</th>
<th>Kepala</th>
<th>Penjualan</th>
</tr>

<tr>
<td>Timur< /td>
<td>Lewis</td>
<td>$2.100</td>
</tr>

<tr><td rowspan=”2″>Selatan</td> <td>Lilian</td><td> $1.180</td></tr>

<tr> <td>Laverne</td><td>$1.300</td></tr>

<tr><td>Barat</td> <td>Larnoe</td ><td>$1.900</td></tr>

</table>
</html>

Dalam contoh ini, sebuah tabel dibuat. Heading Region, Head person, dan Sales ditentukan diikuti oleh empat baris data. Setiap sel dalam tabel ditunjukkan oleh atribut data tabel (td). Data untuk Selatan melintasi dua baris, jadi, dengan menentukan rowspan=2, kata Selatan diperluas melintasi dua baris. Baris berikutnya hanya memiliki dua atribut td dan bukan tiga seperti pada semua baris lainnya.

Seseorang dapat menyalin kode ini ke dalam file teks dan memunculkannya di browser untuk melihat efeknya. Ruang kosong telah ditambahkan dalam kode ini untuk mengidentifikasi kepala penjualan dengan mudah, tetapi itu tidak diperlukan. Berikut ini adalah contoh yang sedikit berbeda di mana satu orang, Lilian, mengepalai dua wilayah: Selatan dan Barat.

<html>

<table border=”1″>

<tr><th>Wilayah</th><th>Kepala</th><th>Penjualan</th></tr>

<tr><td>Timur< /td><td>Lewis</td><td>$2.100</td></tr>

<tr><td>Selatan</td><td rowspan=”2″>Lilian</td><td> $2.480</td></tr>

<tr><td>Barat</td> <td>$1.900</td></tr>

</table>

</html>

Halaman web mungkin tidak perlu menampilkan data dalam bentuk tabel. Itu bisa memiliki header seperti nama dan logo perusahaan, satu atau lebih menu di atas atau di samping, informasi utama di tengah, dan sebagainya. Dalam membuat halaman web seperti itu, struktur tabel sering digunakan di bawahnya tanpa disadari oleh pembaca. Untuk memberikan efek yang halus, atribut rowspan digunakan setiap kali beberapa konten menyebar ke beberapa baris.

Seseorang mungkin ingin membuat halaman web pribadi, misalnya, yang mencakup tiga kolom informasi: Keluarga, Karir, dan Komunitas. Setiap kolom dapat memiliki pengantar singkat, foto, dan detail. Untuk membuat halaman terlihat lebih baik, pita warna dapat digunakan di sepanjang sisi kanan. Dalam hal ini, fitur rowspan dapat digunakan untuk menunjukkan bahwa pita warna mencakup semua baris.