Print multidimensional associative array column ways in html table [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am a beginner in PHP and I have a large amount of data in a multidimensional array
$result =
array
(
array(
array("name" => "Volvo", "price" => 2222, "model" =>18),
array("name" => "Tata", "price" => 2222, "model" =>18),
array("name" => "Asoka", "price" => 2222, "model" =>18),
),
array(
array("name" => "BMW", "price" => 2222, "model" =>17),
array("name" => "Benz", "price" => 2222, "model" =>17),
array("name" => "Maroti", "price" => 2222, "model" =>17),
),
array(
array("name" => "porse", "price" => 25648, "model" =>16),
array("name" => "farari", "price" => 25486, "model" =>16),
array("name" => "Volvo", "price" => 25422, "model" =>16),
),
);
I iterate through the array with a foreach loop, and print the model row ways,
foreach($result as $k => $datas){
echo $datas[$k]['model'].'-->';
foreach($datas as $key => $data){
//print_r($data);
echo $data['price'] ;
echo $data['name'].'-*-';
}
echo '<br>';
}
and when I run this code, I receive the following output:
18-->2222Volvo-*-2222Tata-*-2222Asoka-*-
17-->2222BMW-*-2222Benz-*-2222Maroti-*-
16-->25648porse-*-25486farari-*-25422Volvo-*-
However, I am trying to print column ways this array in html table, in a similar fashion to below:
18 --> 17 --> 16-->
2222-Volvo 2222-BMW 25648-porse
2222-Tata 2222-Benz 25486-farari
2222Asoka 2222-Maroti 25422-Volvo

Answer 1

Try this :
<div style='display:flex; flex-direction: row; flex-wrap: wrap;'>
<?php
foreach($result as $k => $datas){
echo "<div style='display:flex; flex-direction: column;'>";
echo "<div>" . $datas[$k]['model'] . "--></div>";
foreach($datas as $key => $data){
//print_r($data);
echo "<div>" . $data['price'] . "-" . $data['name'] . "</div>" ;
}
echo '</div>';
}
?>
</div>
The output is :
As you can see, the logic is pure HTML/CSS :
First I wrap your data inside a flex container with direction as row and wrap so if you have a lot of element they will go in the next row.
Now in your foreach, each element are wrapped inside an other flex div but with the direction as column : so each new div inside this one will be display under the previous one.
All the div inside are simple div, now your turn to make some css to center text, add padding or whatever
Is it what you are looking hope ? If you have question about flexbox check this : https://css-tricks.com/snippets/css/a-guide-to-flexbox/