Some text some message..
Some text some message..
Some text some message..
Some text some message..

Atribut Colspan Pada Tabel

previous Previous Page

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.

Elemen <th> (table header) adalah elemen yang paling sering dilakukan penggabungan dari beberapa kolom menjadi satu. Namun pada dasarnya semua kolom pada elemen <td> (table data) dapat dilakukan penggabungan / merger.

colspan tabel

Suatu kolom yang diperoleh dari hasil proses penggabungan pada dasarnya merupakan satu buah kolom saja dengan tampilan 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">

Berikut ini contoh penggunaan atribut colspan pada <table>:

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Atribut Colspan Pada Tabel</title>
5.  </head>
6.  <body>
7.     <h4>Tabel dengan nilai atribut colspan</h4>
8.     <table border='1'>
9.      <tr>
10.      <th>No.</th><th width="154">Pelajaran</th><th colspan="3" width="154">Nilai</th>
11.     </tr>
12.     <tr>
13.      <td>1.</td><td>Matematika</td><td>A</td><td>B</td><td>C</td>
14.     </tr>
15.     <tr>
16.      <td>2.</td><td>Bahasa Indonesia</td><td>v</td><td></td><td></td>
17.     </tr>
18.     <tr>
19.      <td>3.</td><td>Bahasa Inggris</td><td>v</td><td></td><td></td>
20.     </tr>
21.     <tr>
22.      <td>4.</td><td>Sejarah Dunia</td><td></td><td>v</td><td></td>
23.     </tr>
24.     <tr>
25.      <td>5.</td><td>Fisika</td><td></td><td>v</td><td></td>
26.     </tr>
27.     <tr>
28.      <td>6.</td><td>Kimia</td><td></td><td>v</td><td></td>
29.     </tr>
30.    </table>
31. </body>
32. </html>
33. 

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

atribut colspan tabel

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 :

Atributcromeinternet explorerfirefoxsafariopera
<colspan>yayayayaya

noteCatatan : 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.

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML