Question

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

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

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

Answer 1

声称桌子本身有些危害是一个神话。当用于布局目的时，表格是有害的。在显示表格数据时，它们仍然是首选武器，你可以清楚地看到它们。

Answer 2

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

http://jsfiddle.net/J8khb/

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

替代使用表来编写时间表

2 个答案: