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

【问题标题】：Alternative to using a table to code timetable使用表格编码时间表的替代方法
【发布时间】：2013-03-11 06:53:21
【问题描述】：

我目前正在使用表格来设计我的时间表 - 但我听说在 Web 开发中最好远离表格，因为很少有人建议这样做。因此，我想知道是否有人可以开出更好的方法来实施我的时间表？到目前为止，我尝试过使用 div，但收效甚微。

这是我正在使用的代码，可以在这里找到一个 jsfiddle http://jsfiddle.net/s2ZgT/：

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

【问题讨论】：

您有表格数据。它属于一个表。毕竟是时间table...

标签： html css

【解决方案1】：

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

【讨论】：

这是在什么地方讨论过的吗？所以我可以说服人们......有一个链接或指向他们的地方会有所帮助。
@pinouchon 发送到这里。我们会告诉他们他们很愚蠢。 ;) 说真的，我会看看我是否可以查找一些东西......
@pinouchon 来自 W3 联盟的官方规范：w3.org/TR/html401/struct/tables.html#h-11.1（寻找更多，请稍等）
这个问题可能是：Why is using tables for website layout such an evil。但这有点偏颇。
@Pekka 我只是想让你知道，如果他只关心表格数据，我完全同意你的看法——很好的答案！

【解决方案2】：

对我来说就像一张桌子。为什么要做别的？在某些情况下，您希望实现div 和span 的系统以显示复杂的用户界面或报告，但这不是其中之一。表格自然会响应内容的变化，并以用户习惯的布局呈现。表格非常常见且易于阅读。即使有一些虚假数据，这仍然看起来不错。这是您的代码示例，其中包含一些简单的数据。

http://jsfiddle.net/J8khb/

底线：使用表格进行表格显示。为复杂的显示器使用替代品。

【讨论】：