05. Colspan dan rowspan
-
Upload
muhammad-arif-billah-faishaluddin -
Category
Documents
-
view
268 -
download
2
Transcript of 05. Colspan dan rowspan
![Page 1: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/1.jpg)
Colspan & Rowspan
by : Kelompok 4
![Page 2: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/2.jpg)
Pernahkan anda melihat tabel ini?
NoAbsensi
S I A
1
2
3
![Page 3: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/3.jpg)
Lalu, bandingkan dengan tabel ini!
![Page 4: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/4.jpg)
Apa yang membedakan
kedua Tabel tersebut?
![Page 5: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/5.jpg)
Untuk mempermudah perbandingan, berilah nomer index pada masing-masing baris dan
kolom.
![Page 6: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/6.jpg)
BAGIAN I< … rowspan = “x” … >
![Page 7: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/7.jpg)
Perhatikan kedua tabel berikut!
![Page 8: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/8.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 9: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/9.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 10: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/10.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 11: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/11.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
Pada tabel ke-2, terlihat bahwa pada baris ke-1 kolom ke-1 dan baris ke-2 kolom ke-1 menjadi satu baris.Sedangkan pada tabel ke-1 baris tersebut tidak menjadi satu (terpisah).
1 2
![Page 12: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/12.jpg)
Dalam HTML, aktivitas menyatukan beberapa baris menjadi satu baris disebut rowspan. Rowspan berasal dari kata row dan span yang mempunyai arti rentan atau panjang baris.
Pada kasus Tabel ke-2, baris ke-1 dan baris ke-2 di kolom ke-1 direntangkan menjadi satu, sehingga yang asalnya dua baris, menjadi satu baris.
![Page 13: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/13.jpg)
Syntaks
<table><tr>
<td rowspan=“angka"> </td></tr>
</table>
catatan :angka : Angka untuk menentukan banyak
baris yang akan direntangkan (digabung).
![Page 14: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/14.jpg)
BAGIAN II< … colspan = “x” … >
![Page 15: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/15.jpg)
Perhatikan kembali kedua tabel berikut!
![Page 16: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/16.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 17: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/17.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 18: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/18.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
1 2
![Page 19: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/19.jpg)
1 2 3 4
1No
Absensi
2 S I A
3 1
4 2
5 3
1 2 3 4
1
2
3
4
5
Pada tabel ke-2, terlihat bahwa pada baris ke-1 kolom ke-2, ke-3, dan ke-4 menjadi satu kolom.Sedangkan pada tabel ke-1 kolom tersebut tidak menjadi satu (terpisah).
1 2
![Page 20: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/20.jpg)
Dalam HTML, aktivitas menyatukan beberapa kolom menjadi satu kolom disebut colspan.Colspan yang berasal dari kata column dan span yang mempunyai arti rentan atau panjang kolom.
Pada kasus Tabel ke-2, baris ke-1 dan kolom ke-2, 3, dan 4 direntangkan menjadi satu, sehingga yang asalnya 3 kolom menjadi satu kolom.
![Page 21: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/21.jpg)
Sintaks
<table><tr>
<td colspan=“angka"> </td></tr>
</table>
catatan :angka : Angka untuk menentukan banyak
kolom yang akan direntangkan (digabung).
![Page 22: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/22.jpg)
Aplikasi pada HTML
Pada tabel ke-2, terdapat 5 baris dan 4 kolom.Maka, pada file html, terlebih dahulu kita buat 5 baris dengan tag <tr> </tr> sebanyak 5 buah.
Pada setiap baris, terdapat 4 kolom, maka tambahkan tag <td> </td> sebanyak 4 buah.Sehingga syntaks pada setiap barisnya sebagai berikut;
![Page 23: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/23.jpg)
<tr><td> </td> <td> </td> <td> </td> <td> </td>
</tr>
![Page 24: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/24.jpg)
Sehingga, apabila dijalankan, akan dihasilkan table sebagai berikut:
![Page 25: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/25.jpg)
Seperti yang kita ketahui pada baris ke-1, ke-2 dan kolom ke-1 barisnya direntangkan menjadi satu.
Maka, pada coding baris pertama, ada perubahan, dimana:
![Page 26: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/26.jpg)
Baris ke-1
<tr><td colspan = “2”> </td> <td> </td> <td> </td> <td> </td>
</tr>
![Page 27: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/27.jpg)
Karena baris ke-2 kolom ke-1 telah direntangkan sebelumnya menjadi baris ke-1, maka, pada baris ke-2 kita hanya perlu membuat kolom sebanyak 3.
Sedangkan untuk baris ke-3, ke-4, dan ke-5, tidak ada perubahan
![Page 28: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/28.jpg)
Baris ke-2
<tr> <td> </td> <td> </td> <td> </td>
</tr>
![Page 29: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/29.jpg)
Hasil Sementara
Dari coding diatas, maka akan dihasilkan sebuah tabel sebagai berikut:
![Page 30: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/30.jpg)
Selain itu, pada Tabel ke-2, di baris ke-1 kolom ke-2, ke-3, dan ke-4 kolomnya direntangkan menjadi satu.
Maka dari itu, pada baris ke-1 kita update lagi codingannya.Sedangkan untuk baris lainnya tidak ada perubahan coding.
![Page 31: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/31.jpg)
Baris ke-1
<tr><td colspan = “2”> </td><td rowspan = “3”> </td>
</tr>
![Page 32: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/32.jpg)
Hasil Final
Dari coding diatas, maka akan dihasilkan sebuah tabel sebagai berikut:
![Page 33: 05. Colspan dan rowspan](https://reader036.fdokumen.com/reader036/viewer/2022062312/55513479b4c905b3598b51c1/html5/thumbnails/33.jpg)
Thank YOU