Displaying Dynamic List Data Properly

Hi, I am making my first eCommerce site and am having trouble understanding how to pull my dynamic list data into a three column table so like | pic | pic | pic | I have tried everything I can think of, and I imagine the answer is simple as always. Thanks for any help, it is much appreciated! here is the code I am using atm:

PHP Code:

<?php include "storescripts/connect_to_mysql.php"; $dynamicList = ''; $sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 16"); $productCount = mysql_num_rows($sql); // count the output amount if ($productCount > 0) { while($row = mysql_fetch_array($sql)){ $id = $row["id"]; $product_name = $row["product_name"]; $price = $row["price"]; $date_added = strftime("%b %d, %Y", strtotime($row["date_added"])); $dynamicList .= '<table width="870" border="0" cellspacing="0" cellpadding="6"> <tr> <td width="17%" valign="top"><a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;" src="../inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="178" height="230" border="1" /></a><br /> ' . $product_name . '<br /> £' . $price . '<br /> <a href="product.php?id=' . $id . '">More Info</a></td> </tr> </table>'; } } else { $dynamicList = "We have no products listed in our store yet"; } mysql_close(); ?>

My first suggestion would be to use floated HTML elements instead of a table, which allows them to fill the available space instead of being hard-coded into a fixed number of table columns, e.g.:

PHP Code:

<html> <head> <title>Test</title> <style type='text/css'> .container { border: solid 2px blue; padding: 0; overflow: auto; /* this takes care of clearing the floats */ width: auto; } .test { float: left; margin: 0.5em; padding: 0.5em; border: solid 1px teal; height: 8em; width: 10em; overflow: auto; } </style> </head> <body> <h1>This Is a Test</h1> <div class='container'> <?php for($i = 1; $i <= 10; $i++) { $text = str_repeat("This is a test.", rand(1,5)); echo "<div class='test'><p>$text</p></div>\n"; } ?> </div>  <p>This is the end of the test, and should come after our repeating DIVs.</p> </body> </html>

Then just replace the for() loop in the above example with your loop on the query data (adjusting it to output the floating elements as above instead of table cells).

If you really want/need to use a table, the typical pattern is to use a counter variable that gets incremented on each loop iteration, and if it is evenly divisible by the desired number of columns, then you insert a "</tr>\n</tr> before the next <td>. This can get kind of fiddly though to keep the resulting HTML valid, and HTML tables in general can slow down page rendering in some cases, especially if you have nested tables.

Sweet

excellent reply, thank you for bothering! I knew I had to try and increment the data to output into separate table rows and that is what was giving me the headache. I've ended up forgetting the table idea completely (as a friend was the one who suggested it) and going back to what I know with CSS, this way I've managed to keep the code the same and can make it look how I like - Thanks for your effort it is greatly appreciated!

here is my code if it helps anyone:

PHP Code:

<?php include "storescripts/connect_to_mysql.php"; $dynamicList = ''; $sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 16"); $productCount = mysql_num_rows($sql); // count the output amount if ($productCount > 0) { while($row = mysql_fetch_array($sql)){ $id = $row["id"]; $product_name = $row["product_name"]; $price = $row["price"]; $date_added = strftime("%b %d, %Y", strtotime($row["date_added"])); $dynamicList .= '<div class="dynamicList"> <a href="product.php?id=' . $id . '"><img style="border:#666 1px solid;" src="../inventory_images/' . $id . '.jpg" alt="' . $product_name . ' "align="left" width="178" height="230" border="1" /></a> <p> ' . $product_name . '</p> <p> £' . $price . '</p> <p> <a href="product.php?id=' . $id . '">More Info</a></p> </div> '; }} else { $dynamicList = "We have no products listed in our store yet"; } ; mysql_close();

HTML Code:

DIV.dynamicList { position: relative; float: left; overflow: hidden; padding-right: 60px; } DIV.dynamicList P, A { text-align: left; text-decoration: none; color: #666; }