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