Atribut colspan adalah fitur HTML yang memungkinkan sel tabel di halaman web diperluas ke beberapa kolom. HTML adalah salah satu cara utama di mana halaman web dibuat. Salah satu cara untuk membawa struktur ke dalam halaman web HTML adalah konsep tabel. Sebuah tabel memiliki beberapa baris dan kolom. Informasi dalam sel individu tabel muncul secara vertikal dan horizontal terorganisir.
Wanita melakukan handstand dengan komputer
Seringkali, saat menampilkan tabel HTML, seseorang ingin beberapa informasi diterapkan atau disebarkan ke beberapa kolom. Ketika informasi seperti itu terbatas pada satu baris, maka atribut colspan akan berguna. Oleh karena itu colspan=N, di mana N adalah beberapa angka seperti 2, 3, dll., menunjukkan bahwa sel menyebar atau merentang banyak kolom.
Pertimbangkan contoh di mana data penjualan ditampilkan sebagai tabel dengan tiga judul kolom: wilayah penjualan, orang yang memimpin wilayah, dan jumlah penjualan. Ketika total ditampilkan, hanya total jumlah penjualan yang menarik. Sel orang akan kosong di baris itu. Alih-alih menunjukkan sel kosong, lebih baik menarik perhatian ke total sebagai gantinya. Kode berikut mencapai ini.
<html>
<table border=”1″>
<tr> <th>Wilayah</th> <th>Kepala Penjualan</th>
<th>Penjualan</th> </tr>
<tr> <td>Timur </td> <td>Lewis</td>
<td>$2,100</td> </tr>
<tr> <td>Selatan</td> <td>Lilian</td>
<td>$2,880</td > </tr>
<tr> <td>Barat</td> <td>Larnoe</td>
<td>$1,900</td> </tr>
<tr> <td colspan=”2″>Total Penjualan< /td>
<td>$6.880</td> </tr>
</table>
</html>
Dalam contoh ini, tabel dibuat, dan tiga judul — Wilayah, Kepala Penjualan, dan Penjualan — ditentukan, diikuti oleh tiga baris data. Setiap sel dalam tabel ditunjukkan oleh atribut td, untuk “data tabel”. Di baris keempat, frasa Total Penjualan diberikan bersama dengan jumlah total. Perhatikan bahwa frasa “Total Penjualan” ditekankan oleh selnya yang mencakup dua kolom: kolom Wilayah dan kolom Kepala; ini dicapai dengan menentukan colspan=2. Sel ini mencakup dua kolom, jadi baris ini hanya memiliki dua atribut td dan bukan tiga seperti pada baris lainnya.
Seseorang dapat menyalin kode ini ke dalam file teks dan memunculkannya di browser untuk melihat efeknya. Halaman web mungkin tidak sering mengharuskan menampilkan data dalam sel tabel seperti pada contoh di atas. Konsep tabel sangat berguna untuk mengatur informasi di halaman web.
Sebuah halaman web sering kali terdiri dari header di atas, seperti nama dan logo perusahaan, satu atau lebih menu di atas atau di samping, informasi utama di tengah, dan informasi ringkasan di bawah. Untuk mencapai hal ini, struktur tabel dapat digunakan di bawahnya tanpa disadari oleh pembaca. Cukup sering beberapa informasi tersebar di beberapa kolom menggunakan atribut colspan, mencegah halaman web terlihat kikuk.
Sebagai contoh, seseorang mungkin menginginkan halaman pribadi dengan tiga kolom: Keluarga, Karir, dan Komunitas. Akan menjadi efek yang bagus untuk memecah kolom monoton dengan foto, di suatu tempat di bawah halaman, di mana ia menyebar di semua kolom. Kode berikut mencapai ini dengan nilai rentang 3.
<html>
<table width=900 border=”0″>
<tr>
<td width=300> Keluarga <br> Saya <br> Anjing… </td>
<td width=300> Karir <br> Eksekutif di Acme… </td>
<td width=300> Komunitas <br> Relawan Rumah Sakit… </td>
</tr>
<tr> <td colspan=”3″ align=center> <img src= …> Foto Saya </td> </tr>
<tr>
<td> Detail keluarga… </td>
<td> Lanjutan karir… </td>
<td> Komunitas lanjutan… < /td>
</tr>
</table>
</html>