Colspan dan Rowspan di Table HTML

Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.

Attribute colspan diletakkan dalam tag <td> dan anda bisa mengatur “value”nya berapa kotak yang akan di span. Berikut saya kasih contohnya:


<table border="1">
<tr>
<td colspan="5">Gabungan Kotak 1-5</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan hasilnya akan menjadi seperti ini:
Gabungan kotak 1-5
Kotak 1Kotak 2Kotak 3Kotak 4Kotak 5

Dengan menyetting colspan menjadi “5”, kotak di barisan pertama akan melebar menjadi gabungan dari 5 kolom. Berikut adalah contoh lain untuk pemahaman yang lebih baik:

<table border="1">
<tr>
<td colspan="3">Kotak 1-3</td>
<td>Kotak A</td>
<td>Kotak B</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan anda bisa lihat di browser, hasilnya akan seperti ini:


Kotak 1-3
Kotak AKotak B
Kotak 1Kotak 2Kotak 3Kotak 4Kotak 5

Bagaimana dengan Rowspan?
Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah sehingga menjadi satu unit yang panjang. Contohnya seperti ini:

<table border="1">
<tr>
<td rowspan="5">Kotak 1-5</td>
<td>Kotak 1</td>
</tr>
<tr>
<td>Kotak 2</td>
</tr>
<tr>
<td>Kotak 3</td>
</tr>
<tr>
<td>Kotak 4</td>
</tr>
<tr>
<td>Kotak 5</td>
</tr>
</table>

dan ini hasilnya pada browser anda:
Kotak 1-5Kotak 1
Kotak 2
Kotak 3
Kotak 4
Kotak 5

Tidak sesulit yang anda perkirakan bukan? dengan banyaknya latihan dan seringnya menggunakan attribute tersebut anda akan semakin gampang memahaminya dan akan terbiasa.



20 comments:

  1. thanks for sharing tutorial buat tabel colspan dan rowspan-na.. saya akan praktekan di post blog saya ^^

    ReplyDelete
  2. baru tahu fungsi colspan dan rowspan :D

    ReplyDelete
  3. kalau rowspannya lebih dari satu, turs cellnya ada 3 gi mana gan...?

    ReplyDelete
  4. mantap gan...emang super mantap nih tulisan agan

    ReplyDelete
  5. Terima kasih tulisannya bagus sekali.

    ReplyDelete
  6. nice tutorial! :)

    ReplyDelete
  7. Nice info...
    Thanks
    By : hafidcyber.com

    ReplyDelete
  8. gan,klo gabungin mau gabungin kolom ama baris gimana ?
    kalo ane coba gini <*td rowspan="3"colspan="3"*> ggal mulu ga,,
    mohon bantuan nya
    maksut gw bintang ntu gak ada

    ReplyDelete
  9. mau gabungin seperti apa, kalau rowspan dan colspan digabungin bisa saja, contohnya seperti ini:

    <table border="1">
    <tr>
    <td rowspan="3" colspan="3">Satu Unit yg Besar</td>
    <td>kotak a</td>
    <tr>
    <td>kotak b</td>
    </tr>
    <tr>
    <td>kotak c</td>
    </tr>
    <td>kotak1</td>
    <td>kotak2</td>
    <td>kotak3</td>
    <td>kotak 4</td>
    </tr>
    </table>

    nanti hasilnya akan seperti ini

    ReplyDelete
  10. mantap ty gan atas infonya :)

    ReplyDelete
  11. makasih informasinya berguna bgt buat saya

    ReplyDelete
  12. Contoh yg paling atas, cara menggabungkan kolom dari kanan gimana ? Misal gabungan kotak 3-5 ? Thanks. #nice_artikel

    ReplyDelete