How create multi dimensional HTML table with loop in PHP

Question

I am new to HTML CSS, I have tried many time but fail. Please help. I want to create table like this:

Sample table

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>

Ari Black · Accepted Answer · 2016-04-06 10:52:11Z

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.

answered Apr 6, 2016 at 10:52

Ari Black

2915 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Over a year ago

i think you may want to swap rowspan for colspan in your final loop

Ari Black Over a year ago

@Ben could be right. My original advice still stands; make a small mock-up of your table manually so that you understand the HTML code result and then transfer that into PHP.

Azhar Hanif Over a year ago

dear Ari Black thanks for your reply. i added that loop to run only once because i need to display stop names on every colum header

chriswirz · Accepted Answer · 2016-04-06 11:11:02Z

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++;
}

dear chriswirz, thanx for your answer. i have tried this code but it is still not working

Collectives™ on Stack Overflow

How create multi dimensional HTML table with loop in PHP

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related