How do I php echo this SQLDatabase data into a stylized table? - php

Question

I'm trying to echo data from an SQLdatabase into a table that is somewhat decent-looking. I can already echo the data properly into 5 separate basic tables, but when I can't figure out how to style it without it completely messing up. Here is the code I already have:
// OUTPUTS RESULTS //
$resultfirst = mysql_query("SELECT * FROM Students WHERE FirstPeriod='$_POST[firstperiod]'");
$resultsecond = mysql_query("SELECT * FROM Students WHERE SecondPeriod='$_POST[secondperiod]'");
$resultthird = mysql_query("SELECT * FROM Students WHERE ThirdPeriod='$_POST[thirdperiod]'");
$resultfourth = mysql_query("SELECT * FROM Students WHERE FourthPeriod='$_POST[fourthperiod]'");
$resultfifth = mysql_query("SELECT * FROM Students WHERE FifthPeriod='$_POST[fifthperiod]'");
// 1st PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>First Period</th>
</tr>";
while($row = mysql_fetch_array($resultfirst))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 2nd PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Second Period</th>
</tr>";
while($row = mysql_fetch_array($resultsecond))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 3rd PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Third Period</th>
</tr>";
while($row = mysql_fetch_array($resultthird))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 4th PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Fourth Period</th>
</tr>";
while($row = mysql_fetch_array($resultfourth))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 5th PERIOD
echo "<table border='1' bgcolor='#3b5998' style='float:left; margin:20'>
<tr>
<th>Fifth Period</th>
</tr>";
while($row = mysql_fetch_array($resultfifth))
{
echo "<tr>";
echo "<td>" . $row['StudentName'] . "</td>";
echo "</tr>";
}
echo "</table>";
If the code above is unclear- my goal is to compare the first period teachers in which are stored in the database, and output the students names that share the same period/teacher.
This code works fine. But the tables look very bland. I would like to echo the data into a table such as this.
<table width="368" border="0" cellspacing="0" cellpadding="2" align="center" height="100">
<tr valign="middle">
<td bgcolor="#000066" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Services</font></b></font> </div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#990000" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Products</font></b></font></div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#C89800" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Resources</font></b></font> </div>
</td>
</tr>
<tr valign="top">
<td bgcolor="#000066" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effective web design, development and promotion services
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#990000" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#C89800" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Free
web resources - articles, tutorials, tips and tricks.
</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
If anyone can offer any suggestions of any sort- I would greatly appreciate it.

Answer 1

I see a few areas that can be improved:
As others have said, don't use tables to manage layout. However, tables are perfectly acceptable for displaying tabular data
You really want to use CSS to style your page, it's a lot easier to control your style and makes the markup easier to read. See this w3schools' artcile on CSS Tables
You can combine your multiple queries into one for better performance (though, that seems to be outside the scope of your question)
Here is an example markup and CSS for your table: http://jsfiddle.net/vxzJV/