php Question posted in
Official manual can be found here.

Generate an HTML table in PHP with cells that span several rows

I wanted to achieve similar result as shown in below image.

Expected result:
enter image description here

Question: Looking for php html solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.

Your help is much appreciated.

Here is my php array data:

<?php
// Data dari database
$data = [
    [
        'nama' => 'Asyah',
        'hobi' => ['Bola', 'Voly', 'Renang'],
        'umur' => '10 Tahun',
        'keahlian' => ['Bernyanyi', 'Menari']
    ],
    [
        'nama' => 'Rian',
        'hobi' => ['Bola'],
        'umur' => '10 Tahun',
        'keahlian' => ['Main musik', 'Menari']
    ],
    [
        'nama' => 'Boby',
        'hobi' => ['Basket', 'Voly'],
        'umur' => '10 Tahun',
        'keahlian' => ['Bernyanyi', 'Menari', 'Coding']
    ]
];

?>

This is the script that I have tried:

<?php

// Fungsi untuk menghitung jumlah rowspan
function getRowspan($data) {
    $total = 0;
    foreach ($data as $item) {
        $total += max(count($item['hobi']), count($item['keahlian']));
    }
    return $total;
}
?>

<table border="1">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Hobi</th>
            <th>Umur</th>
            <th>Keahlian</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($data as $item): ?>
            <?php $rowspan = max(count($item['hobi']), count($item['keahlian'])); ?>
            <tr>
                <td rowspan="<?php echo $rowspan; ?>"><?php echo $item['nama']; ?></td>
                <td><?php echo implode('</td></tr><tr><td>', $item['hobi']); ?></td>
                <td rowspan="<?php echo $rowspan; ?>"><?php echo $item['umur']; ?></td>
                <td><?php echo implode('</td></tr><tr><td>', $item['keahlian']); ?></td>
            </tr>
            <?php for ($i = 1; $i < $rowspan; $i++): ?>
                <tr>
                    <td><?php echo isset($item['hobi'][$i]) ? $item['hobi'][$i] : ''; ?></td>
                    <td><?php echo isset($item['keahlian'][$i]) ? $item['keahlian'][$i] : ''; ?></td>
                </tr>
            <?php endfor; ?>
        <?php endforeach; ?>
    </tbody>
</table>
Tags:

2

Answers


  1. 0 
    <td rowspan="<?php echo $rowspan; ?>"><?php echo $item['nama']; ?></td>
<td><?php echo implode('</td></tr><tr><td>', $item['hobi']); ?></td>
<td rowspan="<?php echo $rowspan; ?>"><?php echo $item['umur']; ?></td>
<td><?php echo implode('</td></tr><tr><td>', $item['keahlian']); ?></td>

    The problem lies in the 2nd and 4th lines, and I’m not quite sure why you want to implode them. You only need to display the first element of these two items. And, I recommend to use the short tag.

    <td rowspan="<?= $rowspan ?>"><?= $item['nama'] ?></td>
<td><?= $item['hobi'][0] ?? '' ?></td>
<td rowspan="<?= $rowspan ?>"><?= $item['umur'] ?></td>
<td><?= $item['keahlian'][0] ?? '' ?></td>
    Login or Signup to reply.
  2. 0

    What about the following sources? Maybe you can try.

    <style>
.header{background:#ccffcc;color:#006600;}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding:2px;
}

</style>

<?php
// variable containing an array of data
$data = [
    [
        'nama' => 'Asyah',
        'hobi' => ['Bola', 'Voly', 'Renang'],
        'umur' => '10 Tahun',
        'keahlian' => ['Bernyanyi', 'Menari']
    ],
    [
        'nama' => 'Rian',
        'hobi' => ['Bola'],
        'umur' => '10 Tahun',
        'keahlian' => ['Main musik', 'Menari']
    ],
    [
        'nama' => 'Boby',
        'hobi' => ['Basket', 'Voly'],
        'umur' => '10 Tahun',
        'keahlian' => ['Bernyanyi', 'Menari', 'Coding']
    ]
];


$html = ''; // Variable to store table row looping HTML

foreach ($data as $item) {
    $rowspan = max(count($item['hobi']), count($item['keahlian']));
    $html .= "<tr>
        <td rowspan="$rowspan" valign='top'>{$item['nama']}</td>
        <td align='right' valign='top'>" . (isset($item['hobi'][0]) ? $item['hobi'][0] : '') . "</td>
        <td rowspan="$rowspan" valign='top'>{$item['umur']}</td>
        <td valign='top'>" . (isset($item['keahlian'][0]) ? $item['keahlian'][0] : '') . "</td>
    </tr>";

    for ($i = 1; $i < $rowspan; $i++) 
    {   
        $html .= "<tr>
            <td  align='right' valign='top'>" . (isset($item['hobi'][$i]) ? $item['hobi'][$i] : '') . "</td>
            <td  align='right' valign='top'>" . (isset($item['keahlian'][$i]) ? $item['keahlian'][$i] : '') . "</td>
        </tr>";
    }

    $ni++;
}
?>
<table class="table">
    <thead>
        <tr class="header">
            <th>Nama</th>
            <th>Hobi</th>
            <th>Umur</th>
            <th>Keahlian</th>
        </tr>
    </thead>
    <tbody><?php echo $html; ?></tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search