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/