Modul ini membahas penggunaan atribut rowspan dan colspan pada tabel HTML. Rowspan digunakan untuk menggabungkan beberapa baris menjadi satu baris, sedangkan colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom. Contoh penggunaannya diberikan pada dua tabel yang dicoding menggunakan HTML.

1. ModulRowspandanColspan

2. Perhatikanandamelihattabelberikut!
No
Absensi
S
I
A
1
2
3
Lalubandingkandengantabeldibawahini!
Apakah yang membedakankeduatabeltersebut?
Untukmempermudahperbandingan, berilahnomer index padamasingmasingbarisdankolomsepertipadatabeldibawahini.
1
2
3
4
1
1
1
2
2
3
3
4
5
4
2
5
3
1
4
2
3
Table 1
No
Absensi
S
I
A
Table 2
Dari ilustrasidiatasdidapatkan:
1. Padatabel ke-2, terlihatbahwapadabaris ke-1 kolom ke-1 danbaris ke-2
kolom ke-1 menjadisatubaris.
Sedangkanpadatabel ke-1 baristersebuttidakmenjadisatu (terpisah).
2. Padatabel ke-2, terlihatbahwapadabaris ke-1 kolom ke-1 danbaris ke-2
kolom ke-1 menjadisatubaris.

3. Sedangkanpadatabel ke-1baris tersebuttidakmenjadisatu (terpisah).
Dalam
HTML,
aktivitasmenyatukanbeberapabarismenjadisatubarisdisebutrowspan.Sedangk
anaktivitasmenyatukanbeberapakolommenjadisatukolomdisebutcolspan.
Rowspan
Rowspanberasaldari
kata
mempunyaiartirentangataupanjangbaris.
rowdanspan
yang
PadakasusTabel ke-2, baris ke-1 danbaris ke-2 di kolom ke-1direntangkan
menjadisatu, sehingga yang asalnyaduabaris, menjadisatubaris.
syntaks:
<td rowspan=“angka"></td>
ket:
angka
: Angkauntukmenentukanbanyakbaris yang
akandirentangkan (digabung).
Colspan
Colspan yang berasaldari kata columndanspan yang
mempunyaiartirentangataupanjangkolom.
PadakasusTabel ke-2, baris ke-1 dankolom ke-2, 3, dan 4
direntangkanmenjadisatu, sehingga yang asalnya 3
kolommenjadisatukolom.
syntaks:
<td colspan=“angka"></td>
ket:
angka
: angkauntukmenentukanbanyakkolom yang
akandirentangkan (digabung).

4. Aplikasipada HTML
Padatabel ke-2, terdapat 5 barisdan 4 kolom.
Maka, pada file html, terlebihdahulukitabuat 5
barisdengantag<tr></tr>sebanyak 5 buah.
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Padasetiapbaris, terdapat 4 kolom, makatambahkantag<td></td>sebanyak
4 buahpadasetiapbaris.
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Sehingga, apabiladijalankan, akandihasilkan table sebagaiberikut:

5. Seperti yang kitaketahuipadabaris ke-1, ke-2 dankolom ke-1
barisnyadirentangkanmenjadisatu.
Maka, padacodingbarispertama, adaperubahan, dimana:
Coding pada tag <tr> (baris) pertama :
<tr>
<td colspan = “2”></td>
<td></td>
<td></td>
<td></td>
</tr>
Karenabaris ke-2 kolom ke-1 telahdirentangkansebelumnyamenjadibaris ke1, maka, padabaris ke-2 kitahanyaperlumembuatkolomsebanyak 3.
Coding pada tag <tr> (baris) kedua:
<tr>
<td></td>
<td></td>
<td></td>
</tr>
Sedangkanuntukbaris ke-3, ke-4, dan ke-5, tidakadaperubahan
Dari coding yang telahkitaperbaharui,
makaakandihasilkansebuahtabelsebagaiberikut:

6. Setelahitu, kitalihattabel ke-2 kembali.padaTabel ke-2, di baris ke-1 kolom
ke-2, ke-3, dan ke-4 kolomnyadirentangkanmenjadisatu.
Makadariitu, padabaris ke-1 kitaperbaharuilagicodingannya.
<tr>
<td colspan = “2”></td>
<td rowspan = “3”></td>
</tr>
Sedangkanuntukbarislainnyatidakadaperubahancoding.
Dari coding diatas, makaakandihasilkansebuahtabelsebagaiberikut: