如果一个日历用表来表示? 为什么谷歌日历只使用一个表中的列?(Should a calendar

2019-09-16 09:46发布

这不是另一个一般的“表与一般布局的div元素”类型的问题,如“为什么不使用表格排版”的问题。


我的工作时间表/日历项目,我一直认为一个日历将何时使用到使用的表的例子。 虽然,快速看一下谷歌日历的结构之后,现在看来,这是由一个表,包含<td>的每一列和每一列中,一个事件是<div>里面定义列表。

为什么这是有益的?

我自己的想法:

  • 表可能是比较麻烦的风格,很好&紧凑地,当存在在同一时间开始的多个不同长度的事件(在相同的开始<td> 不需要空白的可能性。
  • 哈德在页面加载后, 例如用JavaScript当用户添加事件来更新表(由于表头的行/列跨度可能需要更改)
  • 如果使用表,x轴/顶部集流管与单元格的宽度,并且y轴/左头部和单元格的高度,将被自动地匹配。 可能是很难管理此不表。

是否有此事? 如果表格数据始终保存在实际表?


以下是谷歌日历列一个简单的例子:

<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的不是表去。 这并不是说表的是完全错误的,它只是div的可以更加灵活,当谈到他们的造型,特别是如果你加入其他元素(如可能跨越2日会议)等。

DIV的也将在流体中的布局有助于更比一个表可能。

它既是并且不是表格数据,我想这取决于你正在做多远它的功能和布局。



Answer 2:

我认为,这是使用一个表,用于显示日历的原因主要有两个:

  1. 具有可变高度细胞行在表比较简单,但同样的事情可以用浮漂和clearfixes来完成。 该表的做法更容易不破(当然也有古老的浏览器更兼容),并可能是更高效的浏览器呈现。
  2. 多天的事件流是很难用CSS来管理,但它是通过使用合并单元格的(即使它不产生相对丑陋和非语义标记)很简单。

(我问一个问题其他地方在计算器上不知道是否有实现这些目标不表相当稳健和优雅的方式请参见: 多日的日历事件的HTML标记 )



Answer 3:

亚当,这是一个梦幻般的问题。

我认为日历是实际的表的完美使用。 你说得对,表是很难风格最感官,但是当你想真正的问题,这是你喜欢什么。 当然,你可以在技术上建立了桌子,而不是div的很多现代的网站,它会是非常艰难的,但有一个时间和一切的地方。 它配备了下来,在我看来,喜好,如果你可以用更少的标记写的东西,那么这就是你应该使用什么......即使它被认为是不好的做法,由现代标准。

我的投票是正方形的,不变的日历的东西......有桌子去,如果是这样的廉价的解决方案。



文章来源: Should a calendar by represented using a table? Why does Google Calendar only use a table for the columns?