Rowspan digunakan untuk menggabungkan dua atau lebih baris pada satu kolom.
Langsung saja. Disini kita akan membuat sebuah tabel (tiga kolom, tiga baris) dimana pada kolom pertama akan menggabungkan dua baris, sedangkan kolom yang lain tetap.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>
<body>
<table border="1">
<tr>
<td rowspan="2">baris pertama dan kedua, kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>
<tr>
<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>
<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
Jadi, patokannya adalah jumlah baris. Karena kita mau menggabungkan baris bukan kolom seperti pada colspan. Jumlah baris terbanyak adalah tiga. Jadi pada kolom pertama kita tambahkan atribut 'rowspan' dengan nilai dua, karena kita ingin membuat hanya ada dua baris pada kolom pertama. Lalu pada baris kedua, kita lihat bahwa hanya ada dua pasang tag <td></td> karena kolom pertamanya sudah digabung oleh kolom pertama baris pertama.
Saya beri contoh lagi. Kita akan membuat tabel dengan 4 baris dan 3 kolom. Di kolom pertama hanya ada akan 1 baris. Di kolom kedua 4 baris, kolom ketiga ada 3 baris dimana baris kedua dan ketiga digabung.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>
<body>
<table border="1">
<tr>
<td rowspan="4">baris pertama, kedua, ketiga, keempat pada kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>
<tr>
<td>baris kedua kolom dua</td>
<td rowspan="2">baris kedua kolom tiga</td>
</tr>
<tr>
<td>baris ketiga kolom dua</td>
</tr>
<tr>
<td>baris keempat kolom dua</td>
<td>baris keempat kolom tiga</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
Nah, sudah mengerti. Kalau belum ngerti.... gimana ya... yaaaa belajar lagi aja dan perhatikan kode nya dengan baik.
Hasil akhir kedua tabel dapat dilihat dibawah ini:
Oke... pada artikel berikutnya saya akan mencoba memberikan cara bagaimana melakukan pengaturan pada tabel, seperti menentukan lebar, warna background, perataan teks (alignment) dan semacamnya. Insya Allah....
Kalau kolom 1,2,3 adalah fungsi query sedangkan kolom 4 dirowspan (tidak mengikuti query)caranya gimana gan..?
BalasHapus