Atribut rowspan berfungsi untuk merentangkan sel secara vertikal pada tabel di html. Rowspan biasanya digunakan untuk menggabungkan dua atau lebih sel menjadi 1. Berikut adalah contoh penggunaan atribut rowspan pada tag td.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Rowspan</title>
</head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
<body>
<table>
<tr>
<th>CategoryName</th>
<th>ProductName</th>
</tr>
<tr>
<td rowspan="2">Beverages</td>
<td>Chais</td>
</tr>
<tr>
<td>Chang</td>
</tr>
<tr>
<td>Condiments</td>
<td>Aniseed Syrup</td>
</tr>
</table>
</body>
</html>Hasilnya:
Baris ketiga yang berisi data "Chang" dihilangkan satu selnya, kemudian pada baris dua di data "Beverages" direnggangkan selnya menggunakan rowspan ke bawah. Nilai 2 di rowspan artinya sel direnggangkan sebanyak 2 baris. Ubah nilai ini jika ingin merenggangkan lebih dari dua baris.
Rowspan Dinamis
Bagaimana jika ingin membuat rowspan secara dinamis? Misalnya mengambil dari data dari database MySQL kemudian menampilkan dengan kode PHP.
- Langkah 1 : Pastikan data diurutkan berdasarkan kolom yang ingin dikelompokkan.
- Langkah 2 : Simpan data yang sudah diurutkan ke dalam array dengan key adalah kolom yang ingin dikelompokkan.
- Langkah 3 : Buat perulangan untuk menampilkan data dengan mengisikan rowspan pada baris pertama sebanyak jumlah data per kelompok.
Source code Rowspan Dinamis
<!DOCTYPE html>
<html>
<head>
<title>Rowspan Dinamis PHP MySQL HTML</title>
</head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
<body>
<table border="1">
<tr>
<th>Kode Diagnosa</th>
<th>Kode Gejala</th>
</tr>
<?php
$conn = mysqli_connect('localhost', 'root', '', 'ds');
$query = mysqli_query($conn, "SELECT * FROM tb_relasi ORDER BY kode_diagnosa");
$arr = array();
while ($row = mysqli_fetch_object($query)) {
$arr[$row->kode_diagnosa][] = $row;
}
?>
<?php foreach ($arr as $key => $val) : ?>
<?php foreach ($val as $k => $v) : ?>
<tr>
<?php if ($k == 0) : ?>
<td rowspan="<?php echo count($val) ?>">
<?php echo $v->kode_diagnosa ?>
</td>
<?php endif ?>
<td><?php echo $v->kode_gejala ?></td>
</tr>
<?php endforeach ?>
<?php endforeach ?>
</table>
</body>
</html>Hasilnya:
hendri
says:untuk membuat baris dinamis di kolom kedua, ketiga dst gimana bang?
Alvin
says:Kalau dynamic row nya lebih dari satu gimana caranya mas?
admin
says:Kalau yang dimaksud lebih dari 1 kolom itu harus disimpan dalam array 2 dimensi dulu, akan dibahas di artikel selanjutnya.