我目前正在使用表格来设计我的时间表——但我听说在 Web 开发中最好远离表格，因为很少有人建议这样做。因此，我想知道是否有人可以开出更好的方法来实施我的时间表？到目前为止，我尝试过使用 div，但收效甚微。
这是我正在使用的代码，可以在这里找到一个 jsfiddle http://jsfiddle.net/s2ZgT/：
<div id="grid">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr class="gridHeader">
<td> </td>
<td class="underline">09:00</td>
<td class="underline">10:00</td>
<td class="underline">11:00</td>
<td class="underline">12:00</td>
<td class="underline">13:00</td>
<td class="underline">14:00</td>
<td class="underline">15:00</td>
<td class="underline">16:00</td>
<td class="underline">17:00</td>
</tr>
<tr id="mon">
<td class="gridSide">Mon</td>
<td class="box" id="mon1"> </td>
<td class="box" id="mon2"> </td>
<td class="box" id="mon3"> </td>
<td class="box" id="mon4"> </td>
<td class="box" id="mon5"> </td>
<td class="box" id="mon6"> </td>
<td class="box" id="mon7"> </td>
<td class="box" id="mon8"> </td>
<td class="box" id="mon9"> </td>
</tr>
<tr id="tue">
<td class="gridSide">Tue</td>
<td class="box" id="tue1"> </td>
<td class="box" id="tue2"> </td>
<td class="box" id="tue3"> </td>
<td class="box" id="tue4"> </td>
<td class="box" id="tue5"> </td>
<td class="box" id="tue6"> </td>
<td class="box" id="tue7"> </td>
<td class="box" id="tue8"> </td>
<td class="box" id="tue9"> </td>
</tr>
<tr id="wed">
<td class="gridSide">Wed</td>
<td class="box" id="wed1"> </td>
<td class="box" id="wed2"> </td>
<td class="box" id="wed3"> </td>
<td class="box" id="wed4"> </td>
<td class="box" id="wed5"> </td>
<td class="box" id="wed6"> </td>
<td class="box" id="wed7"> </td>
<td class="box" id="wed8"> </td>
<td class="box" id="wed9"> </td>
</tr>
<tr id="thu">
<td class="gridSide">Thu</td>
<td class="box" id="thu1"> </td>
<td class="box" id="thu2"> </td>
<td class="box" id="thu3"> </td>
<td class="box" id="thu4"> </td>
<td class="box" id="thu5"> </td>
<td class="box" id="thu6"> </td>
<td class="box" id="thu7"> </td>
<td class="box" id="thu8"> </td>
<td class="box" id="thu9"> </td>
</tr>
<tr id="fri">
<td class="gridSide">Fri</td>
<td class="box" id="fri1"> </td>
<td class="box" id="fri2"> </td>
<td class="box" id="fri3"> </td>
<td class="box" id="fri4"> </td>
<td class="box" id="fri5"> </td>
<td class="box" id="fri6"> </td>
<td class="box" id="fri7"> </td>
<td class="box" id="fri8"> </td>
<td class="box" id="fri9"> </td>
</tr>
</tbody>
</table>
</div>