How create multi dimensional HTML table with loop in PHP - html

Question

I am new to HTML CSS, I have tried many time but fail. Please help.
I want to create table like this:
I have inserted relevant data in mysql but i am unable to show data in given format/table.
<tbody>
<?php
foreach($record as $row)
{
$pre_stop = $row['pre_stop'];
$current_stop_id = $row['current_stop'];
$cur_stop_name=mysql_query("SELECT stop_name_urd FROM stop WHERE stop_id = '$current_stop_id'");
while($cur_stop=mysql_fetch_array($cur_stop_name))
{
$stop_name=$cur_stop[0];
}
$inter_distance = $row['inter_distance'];
$total_distance += $row['inter_distance'];
echo "<tr>";
echo "<td class='border' style='text-align:center;'>" . $inter_distance . "</td>";
echo "<td class='border' style='text-align:center;'>" . $stop_name . "</td>";
echo "<td class='border' style='text-align:center;'>".$total_distance."</td>";
for ($i=0; $i < 1; $i++) {
echo "<td rowspan='".$count."' class='noBorder' style='text-align:center;'>" . "" . "</td>";
echo "<td class='noBorder'>" . $stop_name . "</td>";
}
}
//echo "<td class='noBorder' style='text-align:center;'>" . $stop_name . "</td>";
//echo "<td></td>";
?>
</tr>
</tbody>

Answer 1

If you're new to coding HTML, then I recommend you try to manually create a smaller version of your table (say 3 rows) so that you know how the resulting HTML code is supposed to look and that you're fetching the SQL data correctly. Then you can transfer that knowledge into PHP code.
Do watch out for your loop, though:
for ($i=0; $i < 1; $i++) {
echo "<td rowspan='".$count."' class='noBorder' style='text-align:center;'>" . "" . "</td>";
echo "<td class='noBorder'>" . $stop_name . "</td>";
}
This will only loop once, which seems to defeat your purpose, as your logical check is odd. Your for loop reads:
$i=0 - Make a variable named i
$i < 1 - Stop if i ever becomes
greater than or equal to 1
$i++ - Add 1 to the value of i
This means that it will go through the loop one time only and then break out of the loop.
I don't see from your code example how you're getting your data but I imagine you'd want something like this:
for ($i=0; $i < $resultCount; $i++) {
echo "<td rowspan='".$count."' class='noBorder' style='text-align:center;'>" . "" . "</td>";
echo "<td class='noBorder'>" . $stop_name . "</td>";
}
Where $resultCount is equal to the number of rows returned by your SQL query.

Answer 2

It looks like you reversed the order of the columns when echo-ing out your html. Also, it would be easier to use colspan vs rowspan in this approach. Not knowing the initial value of count, we shall assume the header is 0 and all other rows are 1 through m (where m is the number of rows since we read a matrix as m x n (rows x columns)).
In conclusion, try this:
$count = 0;
$total_distance = 0;
// the header row
echo "<tr>" . PHP_EOL;
// Apply the space on the left
echo "\t<th colspan='" . (count($record) - $count) . "' class='noBorder' style='text-align:right;'></th>" . PHP_EOL;
// Provide headers on the last three columns
echo "\t<th class='border' style='text-align:center;'>Total Distance</th>" . PHP_EOL;
echo "\t<th class='border' style='text-align:center;'>Stop Name</th>" . PHP_EOL;
echo "\t<th class='border' style='text-align:center;'>Inter-Distance</th>" . PHP_EOL;
echo "</tr>" . PHP_EOL;
foreach($record as $row)
{
// get the values
$pre_stop = $row['pre_stop'];
$current_stop_id = $row['current_stop'];
$inter_distance = $row['inter_distance'];
$total_distance += $inter_distance;
// Assume the last stop in the results has the desired stop name
$cur_stop_name=mysql_query("SELECT stop_name_urd FROM stop WHERE stop_id = '$current_stop_id'");
while($cur_stop=mysql_fetch_array($cur_stop_name))
{
$stop_name = $cur_stop[0];
}
// Start the row
echo "<tr>" . PHP_EOL;
// Apply the space on the left
echo "\t<td colspan='" . (count($record) - $count) . "' class='noBorder' style='text-align:right;'>" . $stop_name . "</td>" . PHP_EOL;
// Apply the last three columns
echo "\t<td class='border' style='text-align:center;'>".$total_distance."</td>" . PHP_EOL;
echo "\t<td class='border' style='text-align:center;'>" . $stop_name . "</td>" . PHP_EOL;
echo "\t<td class='border' style='text-align:center;'>" . $inter_distance . "</td>" . PHP_EOL;
// End the row
echo "</tr>" . PHP_EOL;
// increment the count
$count++;
}