是否应使用表格表示日历？为什么Google日历只使用表格作为列？

Question

这不是另一个通用的"表格与一般布局的div元素"类型问题,如"为什么不使用表格进行布局"问题.

---

我正在制定一个时间表/日历项目,我一直认为日历将是何时使用表格的一个例子.虽然在快速查看Google Calendar的结构之后,它似乎由一个表组成,<td>每个列包含一个列,并且在每个列中,一个事件是一个<div>带有定义列表的内部.

为什么这有益？

我自己的想法:

• 当有多个不同长度的事件同时开始(从同一个开始<td>)时,表格可能更加麻烦,风格,美观和紧凑.不需要的空格的可能性.
• 当用户在加载页面后添加事件时更难更新表格,例如使用JavaScript(因为表格标题的行/列表可能必须更改)
• 如果使用表格,则x轴/顶部标题和单元格的宽度以及y轴/左标题和单元格的高度将自动匹配.没有桌子可能很难管理这个.

这有什么关系吗？表格数据是否应始终存储在实际表格中？

---

以下是Google日历列的简化示例:

<td> <!-- column -->
        <div> <!-- start event -->
            <dl>
                <dt>START TIME – END TIME </dt>
                <dd>EVENT TITLE</dd>
            </dl>
        </div> <!-- end event -->
</td> <!-- end column -->

以下是一个完整的例子:

<td class="tg-col"> <!-- column td -->
    <div id="tgCol0" class="tg-col-eventwrapper" style="height:1008px;margin-bottom:-1008px;"> <!-- column div -->
        <div class="tg-gutter">
            <div class="ca-evp130 chip " style="top:588px;left:-1px;width:100%;"> <!-- start event div -->
                <dl class="cbrd" style="height:35px;border-color:#9FC6E7;background-color:#E4EFF8;color:#777777;">
                    <dt style="background-color:;">START TIME – END TIME <i class="cic cic-dm  cic-rcr" title="Recurring event">&nbsp;</i></dt>
                    <dd><span class="evt-lk ca-elp130">EVENT TITLE</span></dd>
                    <div><!-- start masks -->
                        <div class="mask mask-top" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-bottom" style="border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-left" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                        <div class="mask mask-right" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;">&nbsp;</div>
                    </div><!-- end masks -->
                    <div class="resizer"> <!-- start resizer -->
                        <div class="rszr-icon">&nbsp;</div>
                    </div> <!-- end resizer -->
                </dl>
            </div> <!-- end event div -->
        </div> 
    </div> <!-- end column td -->
    <div id="tgOver0" class="tg-col-overlaywrapper"></div> <!-- column overlay div -->
</td> <!-- end column td -->

---

编辑:

不要忘记为什么谷歌日历的结构原样,例如为什么谷歌日历有一个表,但只用于列？

Answer 1

亚当，这是一个很棒的问题。

我认为日历实际上是表格的完美用途。你是对的，在大多数意义上，表格更难设计样式，但当你考虑真正的问题时，这就是你更喜欢的。当然，从技术上讲，您可以使用表格而不是 div 来构建许多现代网站，这确实很困难，但是一切都有时间和地点。在我看来，这取决于偏好，如果您可以用更少的标记编写一些东西，那么这就是您应该使用的......即使以现代标准来看它被认为是不好的做法。

我的投票支持像日历这样方形且不变的东西......如果这是更便宜的解决方案，请使用表格。