8

这不是另一个通用的“用于一般布局的表格与 div 元素”类型的问题，例如“为什么不使用表格进行布局”问题。

我正在做一个时间表/日历项目，我一直认为日历是何时使用表格的一个例子。虽然，在快速浏览 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 日历有一个表格但只将它用于列？

4

3 回答 3

3

我认为使用表格显示日历有两个主要原因：

  1. 具有可变高度单元格的行在表格中更简单，尽管可以使用浮动和 clearfixes 完成相同的事情。表格方法更可能不会破坏（并且肯定与古老的浏览器更兼容），并且对于浏览器渲染可能更有效。
  2. 使用 CSS 很难管理多日事件的流程，但通过使用 colspan 非常简单（即使它确实产生了相对可怕和非语义的标记）。

（我在 StackOverflow 上的其他地方问了一个问题，想知道是否有一种相当健壮和优雅的方法可以在没有表格的情况下实现这些目标。请参阅：HTML markup for multi-day calendar events）

于 2012-07-12T14:51:25.387 回答
3

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

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

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

于 2012-04-08T00:29:16.373 回答
2

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

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

我的投票是像日历一样方正且不变的东西……如果这是更便宜的解决方案，请使用桌子。

于 2012-04-08T00:24:05.333 回答