1. Colspan & Rowspan
by
: Kelompok 4

2. Pernahkan anda melihat tabel ini?
No
1
2
3
Absensi
S
I
A

3. Lalu, bandingkan dengan tabel ini!

4. Apa yang membedakan
kedua Tabel tersebut?

5. Untuk mempermudah perbandingan, berilah
nomer index pada masing-masing baris dan
kolom.

6. BAGIAN I
< … rowspan = “x” … >

7. Perhatikan kedua tabel berikut!

8. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

9. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

10. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

11. 1
1
2
2
3
1
4
1
1
2
2
3
3
4
5
4
2
5
3
1
4
2
3
No
Absensi
S
I
A
Pada tabel ke-2, terlihat bahwa pada baris ke-1 kolom ke1 dan baris ke-2 kolom ke-1 menjadi satu baris.
Sedangkan pada tabel ke-1 baris tersebut tidak menjadi
satu (terpisah).

12. 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.

13. Syntaks
<table>
<tr>
<td rowspan=“angka"> </td>
</tr>
</table>
catatan
angka
:
: Angka untuk menentukan banyak
baris yang akan direntangkan
(digabung).

14. BAGIAN II
< … colspan = “x” … >

15. Perhatikan kembali kedua tabel
berikut!

16. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

17. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

18. 1
1
2
2
3
1
4
1
1
2
2
3
3
1
4
4
2
5
5
3
No
2
3
4
Absensi
S
I
A

19. 1
1
2
2
3
1
4
1
1
2
2
3
3
4
5
4
2
5
3
1
4
2
3
No
Absensi
S
I
A
Pada tabel ke-2, terlihat bahwa pada baris ke-1 kolom ke2, ke-3, dan ke-4 menjadi satu kolom.
Sedangkan pada tabel ke-1 kolom tersebut tidak menjadi
satu (terpisah).

20. 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 ke2, 3, dan 4 direntangkan menjadi satu, sehingga
yang asalnya 3 kolom menjadi satu kolom.

21. Sintaks
<table>
<tr>
<td colspan=“angka"> </td>
</tr>
</table>
catatan
angka
:
: Angka untuk menentukan banyak
kolom yang akan direntangkan
(digabung).

22. 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;

23. <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

24. Sehingga, apabila dijalankan, akan dihasilkan
table sebagai berikut:

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

26. Baris ke-1
<tr>
<td colspan = “2”> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

27. 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

28. Baris ke-2
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

29. Hasil Sementara
Dari coding diatas, maka akan dihasilkan sebuah
tabel sebagai berikut:

30. 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.

31. Baris ke-1
<tr>
<td colspan = “2”> </td>
<td rowspan = “3”> </td>
</tr>

32. Hasil Final
Dari coding diatas, maka akan dihasilkan sebuah
tabel sebagai berikut:

33. Thank YOU