html - 日历应该用表格表示吗？为什么 Google Calendar 只对列使用表格？

Question

This is not another general 'tables versus div elements for general layout' type question, like the "why not use tables for layout" question.

---

我正在做一个时间表/日历元素，我一直认为日历是何时使用表格的一个例子。尽管在快速查看 Google 日历的结构后，它似乎由一个表组成，其中包含一个 <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 -->

---

编辑:

不要忘记说明 Google 日历的结构为何如此，例如为什么 Google Calendar 有一个表格，但只将它用于列？

Answer 1

就个人而言，我会选择 div 而不是表格。这并不是说表格完全错误，只是 div 在设计它们的样式时可以更加灵活，特别是如果您要添加其他元素(例如可能跨越 2 个日期的 session )等。

与表格相比，Div 还有助于实现流畅的布局。

它既是表格数据又不是表格数据，我想这取决于您对它的功能和布局的了解程度。