Create dynamic HTML table from contents of MySQL DB

[jsa005]

Hello!
On my website I'm looking to create a dynamic HTML table from the contents of a MySQL database.
I have no idea how many rows there will be, and I need it to look a bit like an iPhone home screen.
Here is some code:
v1:
<TABLE border="0" cellspacing="5" width="200" cols="20">


<pre><code>// Make a MySQL Connection
mysql_connect(&quot;localhost&quot;, &quot;jsathost_nintube&quot;, &quot;********&quot;) or die(mysql_error());
mysql_select_db(&quot;jsathost_nintube&quot;) or die(mysql_error());
// Connect me to &quot;videos&quot;, please!
$query = &quot;SELECT * FROM videos&quot;;

$result = mysql_query($query) or die(mysql_error());


echo &quot;&lt;TR&gt;&quot;;
while($row = mysql_fetch_array($result)){
echo &quot;&lt;TD&gt;&lt;A href='watch.php?id=&quot;.$row['idn'].&quot;' title='&quot;.$row['name'].&quot;'&gt;&lt;IMG src='http://www.nintube.jsathost.co.cc/genthumb.php?pic=&quot;.$row['furl'].&quot;' alt='&quot;.$row['name'].&quot;'&gt;&lt;!--&lt;BR /&gt;&quot;.$row['name'].&quot;--&gt;&lt;/A&gt;&lt;/TD&gt;&quot;;
}
echo &quot;&lt;/TR&gt;&quot;;
// echo &quot;&lt;LI&gt;&lt;A href='watch.php?id=&quot;.$row['idn'].&quot;' title='&quot;.$row['name'].&quot;'&gt;&quot;.$row['name'].&quot;&lt;/A&gt;&lt;/LI&gt;&lt;BR /&gt;&quot;;</code></pre>

</TR>
</TABLE>

Screenshot:

[IMG]http://i42.tinypic.com/2dtdd1h.png[/IMG]

v2:

// Make a MySQL Connection
mysql_connect("localhost", "jsathost_nintube", "********") or die(mysql_error());
mysql_select_db("jsathost_nintube") or die(mysql_error());
// Connect me to "videos", please!
$query = "SELECT * FROM videos";
$result = mysql_query($query) or die(mysql_error());

if (($result)||(mysql_errno == 0)) 
{ 
  echo '<TABLE border="0" cellspacing="5" width="200">'; 
  if (mysql_num_rows($result)>0) 
  {  
    //display the data 
    while ($rows = mysql_fetch_array($result,MYSQL_ASSOC)) 
    { 
	   echo "<TR>";
       //loop thru the serials to create three columns
	   $i = 0;
	   while ($i < 1)
	   {
      	echo "<TD><A href='watch.php?id=".$rows['idn']."' title='".$rows['name']."'><IMG src='http://www.nintube.jsathost.co.cc/genthumb.php?pic=".$rows['furl']."' alt='".$rows['name']."'><!--<BR />".$rows['name']."--></A></TD>"; 
	  	$i++;
	   }
	   echo "</TR>";
    } 
  }else{ 
    echo "<tr><td colspan='" . ($i+1) . "'>Error: No videos found!</td></tr>"; 
  } 
  echo "</table>"; 
}else{ 
  echo "Error in running MySQL query: ". mysql_error(); 
}

Screenshot:

[IMG]http://i41.tinypic.com/24cff9j.png[/IMG]

Could anyone possibly help me with this?

[diafol]

WHen you say , like the iPhone homescreen, what do you mean?
How many columns do you need?
It may be safer to use soething like floated list items or even spans as opposed to tables. You could use media queries to sort out presentation for different width screens. ALthough this can be a pain, if you start with 'code (css) for mobile' and build up, it shouldn't load every css rule for smallest screens, typically mobiles with slow connections.

Could you post more info about exactly what you need?

[jsa005]

I have a mockup:
[IMG]http://i44.tinypic.com/ixcmxy.png[/IMG]
I do not know how many columns I need, it's dynamic.
Website: http://www.nintube.us.to
It should fit on the DSi screen (240px wide).

[diafol]

Well, the image wasn't much help. The number of columns should be determined by width of each image and the width of the screen. However, as I mentioned, you can use something like floated list items that wrap around to the next row dynamically. Tables ensure a set number of columns. Or you could create divs (a bit extreme, but here's an example):

<div class="thumb">
   <img src="images/pic.png" alt="" width="50" height="50" /><span>AppTitle</span> 
</div>

css:

.thumb{
   float: left;
   width: 50px;
   margin: 0 15px 15px 0;
}
.thumb span{
   display: block;
}