How to restrict number of images in a row to three?

Question

I am populating the images from my database in a table, how to restrict the images to three per row?

<table border="0" align="center" height="25%" width="25%"  >
<tr><td align="center" width="50px"  bgcolor="#4b2d0e"><strong><font color="#FFFFFF">Friend List</font></strong></td></tr>
 <? foreach($Selected as $row)
 {   
     $value = $row['dPath'];
     $imgp =  base_url()."images"."/".$value;
 ?>
 <tr><td bgcolor="#999999">
 <strong ><?=$row['dFrindName'].'</br>';?></strong>
 <? if($value!="") { ?>
 <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
 <? } else { ?>
 <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
 <? }?>
 </td></tr>
 <? }}?>
</table>

This is my table

Answer 1

<?php 

$x=0;

    foreach($Selected as $row){

        if($x%3 == 0)
            echo '<tr>';

        $value = $row['dPath'];
        $imgp =  base_url()."images"."/".$value;
?>

        <td style="background-color:#999999;">
            <strong ><?=$row['dFrindName'].'</br>';?></strong>

            <?php if($value!="") {?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
            <?php } else { ?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
            <?php }?>
        </td>
<?php
        if($x%3 == 0)
            echo '</tr>';
        x++; 
    }

    if(($x-1)%3 != 0)
        echo '</tr>'; //Prints out the last '<tr>' if one isn't printed.
?>

You need to use an if with a modulus operator.

Answer 2

Here, I cleaned up your invalid HTML, used CSS, and used a more recommended PHP coding style.

Please note: you need to be aware that if $Selected contains user-inputted (or otherwise non-HTML-safe) data, you need to wrap your output in htmlspecialchars or be open to XSS vulnerabilities.

It was a little unclear what you meant by wanting to "restrict the images to three per row" considering that it was only showing 1 per row currently. If I am to assume that you want to show 3 per row rather than 1, than you need to use the modulus operator and only open a new <tr> after every third element, and then close it at the right time. Like this:

<style type="text/css">
    a img { border: none; }
    .friend-list { border: none; width: 25%; height: 25%; margin: 0 auto; }
    .friend-list th { text-align: center; background-color: #4b2d0e; color: #fff; font-weight: bold; }
    .friend-list td { background-color: #999999; }
</style>

<?php 
$numCols = 3;
$colCount = -1;
?>
<table class="friend-list">
    <tr>
        <th colspan="<?php echo $numCols; ?>">Friend List</th>
    </tr>
    <?php
    foreach($Selected as $row) {

        $value = $row['dPath'];
        $imgp = ($value) ? base_url().'images/'.$value : '../images/us.png';

        if(++$colCount % $numCols == 0) {
            echo '<tr>';
        }
        ?>
            <td>
                <strong><?php echo $row['dFriendName']; ?></strong><br />
                <a class="Tab_Link" href="<?php echo site_url(); ?>/friends/View_FProfile/<?php echo $row['dMember_Id']; ?>">
                    <img src="<?php echo $imgp; ?>" width="90" height="80" />
                </a>
            </td>
        <?php 
        if(($colCount + 1) % $numCols == 0) {
            echo '</tr>';
        } elseif (($colCount + 1) == count($Selected)) {
            // if 16 elements are to fit in 3 columns, print 2 empty <td>s before closing <tr>
            $extraTDs = $numCols - (($colCount + 1) % $numCols);
            for ($i = 0; $i < $extraTDs; $i++) {
                echo '<td>&nbsp;</td>';
            }
            echo '</tr>';
        }
    }
    ?>
</table>

Answer 3

Tables should be reserved for situations where columns and rows have meaning... A better solution is to use floated block elements instead of table cells. When you float a bunch of similar blocks, they wrap automatically, so the key is making their parent container just wide enough to hold 3 of them.

You don't need to do anything special with php to create new rows, so i'll just display the html and css, letting you write the php to make it happen.

html:

<div id="replacesTable">
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="clear">&nbsp;</div>
</div>

css:

#replacesTable{
    width: 300px;
}
div.replacesTableCell{
    float:left;
    width: 100px;

    /* styles below are just to make it easier to see what's happening */
    text-align:center;
    font-size: 10px;
    margin: 20px 0;
}
/* this just stretches the parent container #replacesTable around the entries*/
.clear{
    clear:both;
    height:1px;
    overflow:hidden;
}

Answer 4

You can use CSS as an alernative if the images are of a fixed width and you can do without the tables - create a wrapper div with a fixed width around your entire image list, and simply float each image left.