这不是另一个一般的“表与一般布局的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"> </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;"> </div>
<div class="mask mask-bottom" style="border-color:#9FC6E7;background-color:#E4EFF8;"> </div>
<div class="mask mask-left" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;"> </div>
<div class="mask mask-right" style="height:38px;border-color:#9FC6E7;background-color:#E4EFF8;"> </div>
</div><!-- end masks -->
<div class="resizer"> <!-- start resizer -->
<div class="rszr-icon"> </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 -->
编辑:
不要忘了,包括为什么谷歌日历的结构,因为它是,例如,为什么谷歌日历有一个表,但只将其用于列?