Post on 12-May-2015
Colspan & Rowspan
by : Kelompok 4
Pernahkan anda melihat tabel ini?
NoAbsensi
S I A
1
2
3
Lalu, bandingkan dengan tabel ini!
Apa yang membedakan
kedua Tabel tersebut?
Untuk mempermudah perbandingan, berilah nomer index pada masing-masing baris dan
kolom.
BAGIAN I< … rowspan = “x” … >
Perhatikan kedua tabel berikut!
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
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
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
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
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.
Syntaks
<table><tr>
<td rowspan=“angka"> </td></tr>
</table>
catatan :angka : Angka untuk menentukan banyak
baris yang akan direntangkan (digabung).
BAGIAN II< … colspan = “x” … >
Perhatikan kembali kedua tabel berikut!
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
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
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
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
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.
Sintaks
<table><tr>
<td colspan=“angka"> </td></tr>
</table>
catatan :angka : Angka untuk menentukan banyak
kolom yang akan direntangkan (digabung).
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;
<tr><td> </td> <td> </td> <td> </td> <td> </td>
</tr>
Sehingga, apabila dijalankan, akan dihasilkan table sebagai berikut:
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:
Baris ke-1
<tr><td colspan = “2”> </td> <td> </td> <td> </td> <td> </td>
</tr>
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
Baris ke-2
<tr> <td> </td> <td> </td> <td> </td>
</tr>
Hasil Sementara
Dari coding diatas, maka akan dihasilkan sebuah tabel sebagai berikut:
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.
Baris ke-1
<tr><td colspan = “2”> </td><td rowspan = “3”> </td>
</tr>
Hasil Final
Dari coding diatas, maka akan dihasilkan sebuah tabel sebagai berikut:
Thank YOU