Как мне php эхо этих данных базы данных SQL в стилизованную таблицу?

Question

Я пытаюсь отобразить данные из базы данных SQL в таблицу, которая выглядит несколько прилично. Я уже могу правильно отобразить данные в 5 отдельных базовых таблицах, но когда я не могу понять, как их оформить, не испортив их полностью. Вот код, который у меня уже есть:

    // 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>";

Если приведенный выше код неясен - моя цель состоит в том, чтобы сравнить учителей первого периода, в которых они хранятся в базе данных, и вывести имена учеников с одинаковым периодом / учителем. Этот код работает нормально. Но столы выглядят очень мягко. Я хотел бы отобразить данные в такую ​​таблицу, как эта.

<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>

Если кто-то может предложить какие-либо предложения - я был бы очень признателен.

Answer 1

Я вижу несколько областей, которые можно улучшить:

• Как уже говорили, не используйте таблицы для управления макетом. Однако таблицы вполне приемлемы для отображения табличных данных
• Вы действительно хотите использовать CSS для стилизации своей страницы, намного проще контролировать свой стиль и облегчать чтение разметки. См. Это artcile w3schools на CSS таблицы
• Вы можете объединить несколько запросов в один для повышения производительности (хотя, похоже, это выходит за рамки вашего вопроса)

Вот пример разметки и CSS для вашей таблицы: http://jsfiddle.net/vxzJV/