Limit maximum number of elements of a table per line

Question

I want to build a page where I need to show all the members from a database. But when I print them, it shows them on the same line, no matter how much the members are. And I want to limit the number of members per line to 5. How can I do this?

Thank you in advance!

<table id="members-table">
<tr>
<?php
    $queryContent = "SELECT * FROM users WHERE member='yes'";
    $result = mysqli_query($db_connection, $queryContent);
    while($row = mysqli_fetch_assoc($result)) {
        echo '<td>
            <div class="card">
            <img src="img/img_avatar2.png" alt="Avatar">
            <div class="container">
            <h4><b>' .$row['ShownName']. '</b></h4> 
            <p style="font-family:Roboto;">Architect & Engineer</p>
            </div>
        </td>';
    }
?>

Syscall · Answer 1 · 2018-02-11T08:55:53.663

You have to write a <tr> tag on each 5 loops, except for the first loop.

Add $num=0. Then, in the loop, check if $num is greater than 1 (not for the first loop), and the modulo % with five is zero.

<table id="members-table"><tr>
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
$num = 0;
while($row = mysqli_fetch_assoc($result)) {
    if ($num++ % 5 == 0 && $num > 1) echo '</tr><tr>'; // Change is here
    echo '<td>
    <div class="card">
    <img src="img/img_avatar2.png" alt="Avatar">
    <div class="container">
    <h4><b>' .$row['ShownName']. '</b></h4> 
    <p style="font-family:Roboto;">Architect & Engineer</p>
    </div>
</td>';
}
?></tr></table>

score 1 · Answer 2 · answered Feb 11 '18 at 08:47

First, you should consider not using table elements to align your content. This is an outdated practice and not recommended. Check out this StackOverflow question for some great advice on the subject. In short, using tables for laying out your page contents comes from the earlier days of the web before we had things like flexbox and grid layouts.

To answer your question, though, you should implement a $loop_count variable, and echo "</tr><tr>" each time $loop_count > 0 AND $loop_count % 5 == 0.

thank you for explanation and the advice! it worked! – bogdanbledea Feb 11 '18 at 09:35 — bogdanbledea, Feb 11 '18 at 09:35

Adam Plocher · Answer 3 · 2018-02-11T08:50:39.207

Using the mod operator (%) will do the trick. This will work and not produce extra unnecessary TR's or /TR's (with the exception of a single empty row if the data is blank):

<table id="members-table">
<?php
$queryContent = "SELECT * FROM users WHERE member='yes'";
$result = mysqli_query($db_connection, $queryContent);
$i = 0;
while($row = mysqli_fetch_assoc($result)) {
    if ($i % 5 == 0) {
        echo "<tr>";
    }
    echo '<td>
    <div class="card">
    <img src="img/img_avatar2.png" alt="Avatar">
    <div class="container">
    <h4><b>' .$row['ShownName']. '</b></h4> 
    <p style="font-family:Roboto;">Architect & Engineer</p>
    </div>
    </td>';
    if ($i % 5 == 4 || $i - 1 == count($cols)) {
        echo "</tr>";
    }
    $i++;
}
?>

mickmackusa · Accepted Answer · 2018-02-11T20:21:11.907

The devil is in the detail on this one. Because you are building a table (which must have an equal number of columns in each row) you need to write conditionals to build a complete structure.

First, a set of conditionals to separate the data into rows of 5 cells
Second, a conditional after the loop to ensure that the final table row contains the correct number of cells.

Code: (Demo)

$resultset=[
    ['ShownName'=>'A'],
    ['ShownName'=>'B'],
    ['ShownName'=>'C'],
    ['ShownName'=>'D'],
    ['ShownName'=>'E'],
    ['ShownName'=>'F'],
    ['ShownName'=>'G']
];
echo "<table>";

$counter=0;
foreach($resultset as $row){ // you while loop
    if($counter%5==0){
        if($counter){
            echo "</tr>";
        }
        echo "<tr>";  // start new row
    }
    echo "<td>";
        echo "<div class=\"card\">";
            echo "<img src=\"img/img_avatar2.png\" alt=\"Avatar\">";
            echo "<div class=\"container\">";
                echo "<h4><b>{$row['ShownName']}</b></h4>";
                echo "<p style=\"font-family:Roboto;\">Architect & Engineer</p>";
            echo "</div>";
        echo "</div>";
    echo "</td>";
    ++$counter;
}
if($mod=$counter%5){
    $colspan=5-$mod;
    echo "<td",($colspan>1?" colspan=\"$colspan\"":""),"></td>"; // complete the row with appropriately sized cell
}
echo "</tr>";

echo "</table>";

Output:

<table>
    <tr>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>A</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>B</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>C</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>D</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>E</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>F</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td>
            <div class="card">
                <img src="img/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>G</b></h4>
                    <p style="font-family:Roboto;">Architect & Engineer</p>
                </div>
            </div>
        </td>
        <td colspan="3"></td>
    </tr>
</table>

@bogdanbledea there is nothing wrong with using table to display tabular data. It doesn't look like you are building a whole page into the table, just a table of cards -- seems fine to me. — mickmackusa, Feb 11 '18 at 09:50

Limit maximum number of elements of a table per line

4 Answers4