Atribut colspan merupakan atribut pada tabel yang digunakan untuk menggabungkan dua buah atau lebih kolom menjadi satu buah kolom. Kolom merupakan deretan sel pada tabel yang mempunyai arah membujur ke atas dan ke bawah (vertikal). Penggabungan / merger beberapa buah kolom biasanya digunakan jika suatu kolom untuk judul yang mempunyai sub-sub kolom dibawahnya.
HTML tag element <TH> (table header) merupakan element HTML pada tabel yang paling sering dilakukan penggabungan dari beberapa kolom menjadi satu buah kolom saja. Namun pada dasarnya semua kolom pada elemen <td> (table data) dapat dilakukan penggabungan / merger.
Colspan (penggabungan kolom) pada tabel :
Susunan tabel pada HTML :
Suatu kolom yang diperoleh dari hasil proses penggabungan beberapa kolom pada tabel pada dasarnya merupakan satu buah kolom saja. Tampilan kolom hasil penggabungan akan menyesuaikan dengan jumlah keseluruhan lebar kolom asal penggabungan. Kolom yang digabung dapat berisi 2 buah kolom, 3 kolom dan seterusnya. Untuk menggabungkan 2 buah kolom menjadi 1 kolom, dibuat dengan menuliskan attribut colspan="jumlah kolom".
Penulisan Syntax:
<th colspan="jumlah kolom">Konten</th>
<td colspan="jumlah kolom">Konten</td>
Contoh berikut merupakan penggabungan beberapa kolom pada tabel menjadi satu dengan menggunakan atribut colspan :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Atribut Colspan Pada Tabel</title>
</head>
<body>
<h1>Belajar Menggunakan Atribut Colspan Pada Tabel</h1>
<table border='1'>
<tr><th>No.</th><th width="154">Pelajaran</th><th colspan="3" width="154">Nilai</th></tr>
<tr><td>1.</td><td>Matematika</td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2.</td><td>Bahasa Indonesia</td><td>v</td><td></td><td></td></tr>
<tr><td>3.</td><td>Bahasa Inggris</td><td>v</td><td></td><td></td></tr>
<tr><td>4.</td><td>Sejarah Dunia</td><td></td><td>v</td><td></td></tr>
<tr><td>5.</td><td>Fisika</td><td></td><td>v</td><td></td></tr>
<tr><td>6.</td><td>Kimia</td><td></td><td>v</td><td></td></tr>
</table>
</body>
</html>
Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :
Perhatikan pada tabel yang dihasilkan, pada tabel data <td>, pada bagian "Nilai" diberikan atribut colspan dengan nilai colspan = "3". Ini artinya pada tabel data <td> tersebut terdapat 3 buah tabel data <td> yang akan digabungkan dan dijadikan satu buah kolom saja. Dari hasil dari penggabungan tersebut, lebar dari tabel data <td> akan menyesuaikan dengan lebar 3 buah kolom yang ada di bawahnya.
Browser Pendukung :
| Atribut |  |  |  |  |  |
| <colspan> | ya | ya | ya | ya | ya |
Catatan : Sebelum adanya penataan gaya dengan CSS, tag <table> digunakan untuk mendesain kerangka halaman web. Hal ini dapat dilakukan dengan mudah melalui penetapan atribut <colspan> ataupun <rowspan> untuk mendapatkan susunan rangka halaman web tersebut. Anda seharusnya tidak menerapkan cara ini, silahkan menggunakan CSS sebagai penggantinya.
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
