Membuat Rowspan Dinamis dengan PHP HTML MySQL

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:

HTML Table Rowspan

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:

Rowspan Dinamis PHP MySQL HTML

One Comment “Membuat Rowspan Dinamis dengan PHP HTML MySQL”

  • hendri

    says:

    untuk membuat baris dinamis di kolom kedua, ketiga dst gimana bang?

Leave a Comment

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

To top