Html 使用表格编码时间表的替代方案

我目前正在使用一个表格来设计我的时间表——但我听说在web开发中最好远离表格，因为很少有人建议这样做。因此，我想知道是否有人能规定一种更好的方法来执行我的时间表？到目前为止，我尝试使用div，但收效甚微

下面是我正在使用的代码，可以在这里找到JSFIDLE：

09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
周一
星期二
结婚
清华大学
星期五

声称表格本身有害的说法是一个神话。表被误用于布局目的时是有害的。它们仍然是显示表格数据时的首选武器，而您的数据显然是。

在我看来就像一张表格。为什么还要做别的？在某些情况下，为了显示复杂的ui或报表，您需要实现一个由

div

和

span

组成的系统，但这不是其中之一。表格将自然响应内容的变化，并以用户习惯的布局呈现。表格很常见，也很容易阅读。即使有一些虚假的数据，这看起来还是不错的。下面是一个包含一些简单数据的代码示例

---

底线：使用表格进行表格显示。对于复杂的显示，使用备选方案。

您有表格数据。它应该放在桌子里。毕竟这是一张时间表……这是在什么地方讨论过的吗？所以我可以说服人们。。。有一个链接或某个地方指向他们会有所帮助。@pinouchon将他们发送到这里。我们会告诉他们他们很笨不过说真的，我会看看我是否能找到一些东西……@pinouchon W3联盟的官方规范：（寻找更多，等等）这个问题可能是：。但这有点偏颇。@Pekka我只想让你知道，如果他只关心表格数据，我完全同意你的看法——这是个好答案！

<div id="grid">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr class="gridHeader">
                <td>&nbsp;</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">&nbsp;</td>
                <td class="box" id="mon2">&nbsp;</td>
                <td class="box" id="mon3">&nbsp;</td>
                <td class="box" id="mon4">&nbsp;</td>
                <td class="box" id="mon5">&nbsp;</td>
                <td class="box" id="mon6">&nbsp;</td>
                <td class="box" id="mon7">&nbsp;</td>
                <td class="box" id="mon8">&nbsp;</td>
                <td class="box" id="mon9">&nbsp;</td>
            </tr>
            <tr id="tue">
                <td class="gridSide">Tue</td>
                <td class="box" id="tue1">&nbsp;</td>
                <td class="box" id="tue2">&nbsp;</td>
                <td class="box" id="tue3">&nbsp;</td>
                <td class="box" id="tue4">&nbsp;</td>
                <td class="box" id="tue5">&nbsp;</td>
                <td class="box" id="tue6">&nbsp;</td>
                <td class="box" id="tue7">&nbsp;</td>
                <td class="box" id="tue8">&nbsp;</td>
                <td class="box" id="tue9">&nbsp;</td>
            </tr>
            <tr id="wed">
                <td class="gridSide">Wed</td>
                <td class="box" id="wed1">&nbsp;</td>
                <td class="box" id="wed2">&nbsp;</td>
                <td class="box" id="wed3">&nbsp;</td>
                <td class="box" id="wed4">&nbsp;</td>
                <td class="box" id="wed5">&nbsp;</td>
                <td class="box" id="wed6">&nbsp;</td>
                <td class="box" id="wed7">&nbsp;</td>
                <td class="box" id="wed8">&nbsp;</td>
                <td class="box" id="wed9">&nbsp;</td>
            </tr>
            <tr id="thu">
                <td class="gridSide">Thu</td>
                <td class="box" id="thu1">&nbsp;</td>
                <td class="box" id="thu2">&nbsp;</td>
                <td class="box" id="thu3">&nbsp;</td>
                <td class="box" id="thu4">&nbsp;</td>
                <td class="box" id="thu5">&nbsp;</td>
                <td class="box" id="thu6">&nbsp;</td>
                <td class="box" id="thu7">&nbsp;</td>
                <td class="box" id="thu8">&nbsp;</td>
                <td class="box" id="thu9">&nbsp;</td>
            </tr>
            <tr id="fri">
                <td class="gridSide">Fri</td>
                <td class="box" id="fri1">&nbsp;</td>
                <td class="box" id="fri2">&nbsp;</td>
                <td class="box" id="fri3">&nbsp;</td>
                <td class="box" id="fri4">&nbsp;</td>
                <td class="box" id="fri5">&nbsp;</td>
                <td class="box" id="fri6">&nbsp;</td>
                <td class="box" id="fri7">&nbsp;</td>
                <td class="box" id="fri8">&nbsp;</td>
                <td class="box" id="fri9">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>