How to get the transpose of a html table?

I have a sql query as follows, and it is getting the output as same as I need.

SELECT Node, 
       Round(MAX(CASE WHEN Date=  '2022-01-17' THEN  Value END),2) AS day01,
       Round(MAX(CASE WHEN Date = '2022-01-18' THEN  Value END),2) AS day02,
       Round(MAX(CASE WHEN Date = '2022-01-19' THEN  Value END),2) AS day03,
       Round(MAX(CASE WHEN Date = '2022-01-20' THEN  Value END),2) AS day04,
       Round(MAX(CASE WHEN Date = '2022-01-21' THEN  Value END),2) AS day05,
       Round(MAX(CASE WHEN Date = '2022-01-22' THEN  Value END),2) AS day06,
       Round(MAX(CASE WHEN Date = '2022-01-23' THEN  Value END),2) AS day07
FROM table01
GROUP BY Node;

Output:

Now I need this table to set to a html table, I have used following method.

while ($row = $result -> fetch_assoc())
{
    $Node_table .= '<td style="text-align:center"><b>'.$row['Node'].'</td>';
    $date06_table .= '<td style="text-align:center">'.$row['day01].'</td>';
    $date05_table .= '<td style="text-align:center">'.$row['day02].'</td>';
    $date04_table .= '<td style="text-align:center">'.$row['day03].'</td>';
    $date03_table .= '<td style="text-align:center">'.$row['day04].'</td>';
    $date02_table .= '<td style="text-align:center">'.$row['day05].'</td>';
    $row['Node']++;

    
}



$messagenew.= '
    <table style="top: 15px; left:10px;" border=1 >
          
        <tbody>
            <caption style="color: rgb(241, 239, 243);background: rgb(1, 32, 65); ">UGW Peak Throughput(Gb/s)</caption>
            <tr>
                <td><b></td>'.$Node_table .'
            </tr>

            <tr>
            <td style="text-align:center" ><b>day01</td>'.$date01_table .'
            </tr>
            <tr>
            <td style="text-align:center"><b>day02</td>'.$date02_table .'
            </tr>
            <tr>
            <td style="text-align:center"><b>day03</td>'.$date03_table .'
            </tr>
            <tr>
            <td style="text-align:center"><b>day04</td>'.$date04_table .'
            </tr>
            <tr>
            <td style="text-align:center"><b>day05</td>'.$date05_table .'
            </tr>

        </tbody>
    </table>
';

But this code provides the transposed shape of what I actually need. Here is the output what I receive.

Can someone show me where I made the wrong?(neglect the numbers inside they are just for representation)

Solution 1:

When you run through the fetch result and join every $row['Node'] to the $node_table string with TD tags you transpose this column of data to a single html row.

At the end of looping through the fetch result you get roughly the next for the $node_table var:

'<td>T1</td><td>T2</td><td>T3</td>’.

Then you surround this var with TR tag in the $mesagenew html template and get the table row.

The same goes for the rest of the data.

I would suggest you to concat ever cell of the fetched row to a single string in an array instead of several vars:

$table_rows[$rowId] .= '<tr><td>'.$row['Node’].'</td><td>'.$row['day01’].'</td><td>'.$row['day02’].'</td><td>'.$row['day03'].'</td><td>'.$row['day04'].'</td><td>'.$row['day05’].'</td></tr>';
$rowId++;

Then you can put this array into your $messagenew template (omitted styles for brevity):

$table_caption = '<caption>UGW Peak Throughput(Gb/s)</caption>';
$table_header = '<tr><td>Node</td><td>day01</>...</tr>';
$messagenew .= '<table><tbody>’.$table_caption.$table_header.implode($table_rows).'</tbody></table>';