应该使用表来表示日历吗？为什么Google日历只为列使用表格？ [英] Should a calendar by represented using a table? Why does Google Calendar only use a table for the columns?
问题描述
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> 内含定义列表。
I'm working on a timetable/calendar project and I have always assumed that a calendar would be an example of when to use to a use a table. Although, after a quick look at Google Calendar's structure, it seems it consists of a table, containing a <td> for each column and within each column, an event is a <div> with definition list inside.
我自己的想法：
- 表格可能更麻烦，当开始于同一时间（以相同的
< td>开始）的多个变化长度事件时， - 用户在加载网页后添加事件时更新表格变得非常困难，例如。与JavaScript （因为表头的行/ colspan可能必须更改）
- 如果使用表，x轴/单元格和y轴/左标题和单元格的高度将自动匹配。
- Tables may be more troublesome to style, nicely & compactly, when there are multiple varying length events beginning at the same time (beginning in the same
<td>). Possibility of unwanted whitespace. - Harder to update tables when user adds event after the page is loaded, e.g. with JavaScript (because the row/colspan of the table headers might have to change)
- If tables were used, the width of x-axis/top headers & cells, and the height of y-axis/left headers and cells, would be matched automatically. Could be tough to manage this without tables.
有没有这个问题？应将表格数据始终存储在实际表中吗？
Does any of this matter? Should tabular data always be stored in actual tables?
Google日历列的简化示例：
The following is a simplified example of a Google Calendar column:
<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 -->
编辑：
不要忘记包含Google日历结构的原因，例如为什么Google日历有一个表格，但只使用它的列？
Don't forget to include why Google Calendar is structured as it is, e.g. why does Google Calendar have a table but only use it for the columns?
推荐答案
我认为有两个主要原因使用用于显示日历的表：
I think there are two main reasons to use a table for displaying calendars:
- 具有可变高度单元格的行在表中更简单，但使用浮动和修饰符可以完成相同的操作。表格方法更有可能不会破坏（并且肯定与旧浏览器更兼容），并且可能更有效地用于浏览器呈现。
- 多天活动的流程非常很难用CSS管理，但通过使用colspan很简单（即使它产生相对可怕和非语义的标记）。
（我在StackOverflow的其他地方问一个问题想知道是否有一个相当健壮和优雅的方式来实现没有表的这些结束见：多日日历活动的HTML标记）
(I'm asking a question elsewhere on StackOverflow wondering whether there's a reasonably robust and elegant way to achieve these ends without tables. See: HTML markup for multi-day calendar events)
这篇关于应该使用表来表示日历吗？为什么Google日历只为列使用表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
