Modul Rowspan dan Colspan

Perhatikan anda melihat tabel berikut!

No

Absensi

S I A

1

2

3

Lalu bandingkan dengan tabel dibawah ini!

Apakah yang membedakan kedua tabel tersebut?

Untuk mempermudah perbandingan, berilah nomer index pada masing-masing baris dan kolom seperti pada tabel dibawah ini.

1 2 3 4

1

2

3

4

5 Table 1

1 2 3 4

1No

Absensi

2 S I A

3 1

4 2

5 3 Table 2

Dari ilustrasi diatas didapatkan:

1. 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).

2. 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-1baris tersebut tidak menjadi satu (terpisah).

Dalam HTML, aktivitas menyatukan beberapa baris menjadi satu baris disebut rowspan. Sedangkan aktivitas menyatukan beberapa kolom menjadi satu kolom disebut colspan.

Rowspan

Rowspan berasal dari kata row dan span yang mempunyai arti rentang atau panjang baris.

Pada kasus Tabel ke-2, baris ke-1 dan baris ke-2 di kolom ke-1direntangkan menjadi satu, sehingga yang asalnya dua baris, menjadi satu baris.

syntaks:<td rowspan=“angka"> </td>

ket:angka : Angka untuk menentukan banyak baris yang akan

direntangkan (digabung).

Colspan

Colspan yang berasal dari kata column dan span yang mempunyai arti rentang 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.

syntaks:<td colspan=“angka"> </td>

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

<table>

<tr> </tr>

<tr> </tr>

<tr> </tr>

<tr> </tr>

<tr> </tr>

</table>

Pada setiap baris, terdapat 4 kolom, maka tambahkan tag <td> </td> sebanyak 4 buah pada setiap baris.

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

Coding pada tag <tr> (baris) pertama :

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

Coding pada tag <tr> (baris) kedua:

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

Sedangkan untuk baris ke-3, ke-4, dan ke-5, tidak ada perubahan

Dari coding yang telah kita perbaharui, maka akan dihasilkan sebuah tabel sebagai berikut:

Setelah itu, kita lihat tabel ke-2 kembali. 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 perbaharui lagi codingannya.

<tr>

<td colspan = “2”> </td>

<td rowspan = “3”> </td>

</tr>

Sedangkan untuk baris lainnya tidak ada perubahan coding.

Dari coding diatas, maka akan dihasilkan sebuah tabel sebagai berikut: