用于多日日历事件的HTML标记

我熟悉基于colspan的标准方法，可以用HTML显示（多周或月视图）日历，其中包含跨越多天的事件。（谷歌日历就是这样做的，这是许多例子之一。）

我很好奇是否有人知道一种无表方法可以实现同样的效果。也许这并不重要，这是table元素的一个“好”用法，但我认为在这个响应性设计的时代，它可能更相关

下面是一个响应迅速、无桌日历的示例。（虽然没有多日事件）在它的小视口版本中，从语义上讲，它不再是一个表。类似地，正如@ThinkingStiff在下面提到的，如果您在客户端从“月视图”切换到“列表视图”，那么表在语义上也不太合适。

Calendars！=桌子 日历在语义上不是表。它们感觉像是表格，因为我们总是这样看待它们，但是为了使数据在语义上是表格的，每一行都必须包含一个唯一的实体，而它们不包含。在日历中，天是实体

混淆之处在于，我们也将一天分为几周。人们自然地认为一个月是一周的集合，但事实并非如此，它是一天的集合。一个月平均有4.3周。表中的一行不能包含一个实体的一部分或多个实体。

行==实体，列==属性 将其与在线购物车进行比较。购物车中的项目是表格。每一行表示购物车中的一种项目。每个列要么是项目的属性（名称、库存编号、价格），要么是属性的聚合（数量、总额）。您永远不会在一行中看到两种不同的项目类型（因为这没有意义），购物车不能包含4.3行

解决办法 对于这个演示，我使用了

，每天一个设置为

显示：inline block

，但是您可能需要使用

。在月/周/日视图之间进行更改时，日期流动良好（表中不可能）。对于多日事件，Javascript可以进行布局

演示：

输出：

脚本：

var事件=[{from:3，to:9}，{from:4，to:4}，{from:9，to:11}，{from:4，to:12}]；
对于（var eventIndex=0，event；event=events[eventIndex]，eventIndex对于（var dayIndex=event.from；dayIndex），我知道主流观点（）一直以来都是针对表格的，但我也意识到许多长期以来的假设都被小视口的流行推翻了。我认为关于多日事件的难题是它们如何取代相邻几天的事件。表格和colspan使这一点变得非常简单。我认为这个解决方案的复杂性在很大程度上证明了这一点，丑陋事实上，使用表可能比解决方案更优雅。这需要大量Javascript来完成（几乎）表“只是做的事情”。（我说几乎，因为此解决方案不会处理非固定高度的事件。）@MichaelHellein是的，对于多日活动来说，无表方法有点困难。它的优点是布局。从月视图切换到日视图或周视图是一个简单的问题，即使用新的宽度和高度为日添加一个类。是的，这正是我问这个问题的原因。让我们