現在、タイムテーブルを設計するためにテーブルを使用していますが、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>