Tutorial Tabel HTML Part 4: Cara Menggabungkan Sel Tabel (atribut rowspan dan colspan)
Halo Kawan-kawan,
Dalam membuat tabel terkadang kita ingin menyatukan bagian-bagian tertentu dalam sel-sel yang ada dalam sebuah tabel. Untuk menjawab kebutuhan inilah HTML menyediakan atribut rowspan dan colspan.
Langsung saja, mari kita lihat contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border="1">
<tr>
<th>Baris 1, Kolom 1</th>
<th>Baris 1, Kolom 2</th>
<th>Baris 1, Kolom 3</th>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td colspan="2" >Baris 2, Kolom 2 & 3</td>
</tr>
<tr>
<td rowspan="2"> Baris 3 & 4, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Dalam contoh diatas, kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan membuat sel tabel bersatu dengan baris dibawahnya. Kedua atribut ini membutuhkan nilai (value), dimana nilai ini adalah seberapa banyak sel tabel yang dibuat ‘bersatu’.
Misalkan colspan=’3’ akan membuat 3 kolom bergabung menjadi 1 sel, dan rowspan=’2’ akan membuat sel tabel bersatu dengan 1 baris dibawahnya.
Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.
Untuk tutorial tabel HTML selanjutnya, kita akan membahas tentang Cara Menggabungkan Sel Tabel (atribut rowspan dan colspan).