trainmania100 trainmania100 - 26 days ago 8
HTML Question

Echoing PHP API Data In 3 Columns

I am getting website design ideas from a website API.

Currently my setup displays these designs in a table with only one column, I have over 40 items that need to be displayed in the table, but id prefer to display it in 3 columns. I have tried using i=0 ++ things etc but couldnt work out where to put it.

Here is my code so far:

<?php


$output = json_decode($output);
curl_close($ch);
echo '<table border="1">';
foreach($output as $template) {
echo '<tr>';
echo '<td>' . $template->template_name . '</td>';
echo '</tr>' . '<tr>';
echo '<td><a href="'. $template->preview_url .'" target="_blank"><img src="' . $template->thumbnail_url. '"></a>' . '</td>';
echo '<tr>';
echo '<td><form method="GET" action=' . $_SERVER['PHP_SELF'] . '>';
echo '<input type="hidden" name="template_id" value="' . $template->template_id . '">';
echo '<input type="url" name="original_url" placeholder="Existing Site URL">'.'<br />';
echo '<input type="email" name="email" placeholder="Your e-mail" required>'.'<br />';
echo '<button type="submit">Choose Site</button>';
echo '</form></td>';


echo '</tr>';

}


echo '</table>';
}


?>


The output includes all of the website templates.
I am putting it into rows.The first row contains the name of the template, the second the picture of the website template and the third a form which I am working on.

My question is how can I nest the loop so that it does 3 columns, each row with 3 different designs?

Many thanks in advance

Answer

The common idea may be as the following, for example:

<?php


$array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
$i = 1;

echo "<table>";
foreach ($array as $arr) {
    if ($i % 3 === 0) {
       echo "<tr class='class_3'>";
    } else if ($i % 2 === 0) {
       echo "<tr class='class_2'>";
    } else {
       echo "<tr class='class_1'>";
    }

    echo '<td>'.($i++).'</td>';
    echo '<td>'.($i++).'</td>';
    echo '<td>'.($i++).'</td>';

    echo "</tr>";
    //$i++; for 123 456
}
echo '</table>';            

?>
Comments