Table layout

[doddsey_65]

The following is a query i use to get all the records from the database. They are currently laid out by showing the thumbnail with the name next to it. The only thing is that it shows all records on the same row and i only want three on the same row then the others to go onto a new row so there are only ever three on a single row. How would i do this?

 

echo '<div id="page">';
echo '<div id="content"><br />';
echo '<div class="post"><p class="meta">Public Gallery (click images for lager versions)</p></div>';
?>
<form action="searchpublic.php" method="post" style="padding-top:10px;">
<input type=text name=user value=Username maxlength=50>
<input type=submit value=Search name=search>
</form>


<?php
$sql = "SELECT *        
FROM   publicgallery $max";

echo '<div class="post">';
echo '<p class="meta">PUBLIC GALLERY</p>';	
echo '<div class="entry"">';
echo '<table border="1" style="padding-top:10px;"><tr>';

$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {

echo '<td>';


echo '<center><img src=' .$row['thumbpath']. ' height="100" width="125" hspace="10" style="border: 1px solid #fff;"></center></td><td>';

echo $row['name']. '<br>' .$row['username'];


} 

echo '</tr></table></div>';

[Jax2]

Use a count in your while loop ...

 

before the while loop, start your count: $i=0

 

then inside the while loop, use $i++ after the row is inserted, followed directly by an if statement... I.e.:

if ($i=='3')

{

echo "</tr></tr>";

$i=0;

}

 

so essentially, it's telling your table to create a new line after every 3 records are shown ...

 

[doddsey_65]

okay this is what ive done, but its showing one record on the top row then 2 underneath it and 2 thereafter.

 

$sql = "SELECT *        
FROM   publicgallery $max";

echo '<div class="post">';
echo '<p class="meta">PUBLIC GALLERY</p>';	
echo '<div class="entry"">';
echo '<table border="1" style="padding-top:10px;">';

$i=0;

$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
$i++;

if ($i=='2') {

echo '</tr><tr>';
$i=0;
}

echo '<td>';


echo '<center><img src=' .$row['thumbpath']. ' height="100" width="125" hspace="10" style="border: 1px solid 

#fff;"></center></td><td>';

echo $row['name']. '<br>' .$row['username'];


} 

echo '</tr></table></div>';
echo '</div><br>';

[cyberRobot]

@doddsey_65

 

There are several issues with the code in the last post. I'm pretty sure there is only one record in the first row and two in the others is because of the improperly formatted table.

 

If you look at the code view for the page, I'm sure you'll see that you're missing the first open row tag. And the column after the username in every row was never closed.

 

The reason why you only get two records per row is because your incrementing the column counter ($i) in the beginning instead of the end.

 

You're while loop should look closer to this:

$i=0;
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)) {
//IF FIRST TIME, OPEN A NEW ROW
if($i==0) {
	echo '<tr>';
}

//IF WE HAVE ALREADY PRINTED 3 RECORDS, CLOSE THE OLD ROW AND OPEN A NEW ONE
if($i==2) {
	echo '</tr><tr>';
	$i=0;  //reset counter
}

//DISPLAY CURRENT THUMBNAIL
echo '<td><center><img src=' . $row['thumbpath'] . ' height="100" width="125" hspace="10" style="border: 1px solid #fff;"></center></td>';
echo '<td>' . $row['name'] . '<br>' . $row['username'] . '</td>';

//INCREMENT COUNTER
$i++;
}

 

 

Note that you still need to write some code after the while loop which will close any open rows.

[doddsey_65]

thanks for the reply, i did get around the problem by setting $i to -1 but i will probs change it to your solution as you said it is wrong. Thanks

[cyberRobot]

Actually the while loop should start like:

$firstTime = true;
$i=0;
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)) {
//IF FIRST TIME, OPEN A NEW ROW
if($firstTime) {
	echo '<tr>';
	$firstTime = false;
}

[Psycho]

I wouldn't hard code things such as conditions for checking a counter. Much better to make the code flexible enough so you can change the maximum columns by changing one parameter. This is also a perfect situation to use the modulus operator.

 

<?php

$max_columns = 3;

$result = mysql_query($sql);

$column=0;
while($row = mysql_fetch_assoc($result))
{
    $column++;
    
    //First record in a row
    if($column%$max_columns==1)
    {
        echo "<tr>\n";
    }
    
    echo "<td><center><img src=\"{$row['thumbpath']}\" height=\"100\" width=\"125\" hspace=\"10\" style=\"border: 1px solid #fff;\"></center></td>\n";
    echo "<td>{$row['name']}<br>{$row['username']}</td>\n";

    //Last record in a row
    if($column%$max_columns==0)
    {
        echo "</tr>\n";
    }
}
//Close the last row if needed
if($column%$max_columns!=0)
{
    while($column%$max_columns!=0)
    {
        echo "<td></td>\n";
        $column++;
    }
   echo "</tr>\n";
}

?>