05. Colspan dan rowspan
Download as DOCX, PDF0 likes285 views
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.
05. Colspan dan rowspan
- 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: