11

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

我很好奇是否有人知道实现相同目标的无表方法。也许它只是不重要，这是对表格元素的“好”使用，但我认为它可能在这个响应式设计的时代更相关。

这是一个响应式、无表格日历的示例。（不过，没有多日活动。）https://pittsburghkids.org/calendar在其小视口版本中，从语义上讲，它不再是一张桌子。同样，正如@ThinkingStiff 在下面提到的，如果您在客户端从“月视图”切换到“列表视图”，则表在语义上也并不真正适合。

4

1 回答 1

14

日历！=表格

日历在语义上不是表格。它们感觉像表格，因为这是我们总是看到它们的方式，但是为了使数据在语义上呈表格形式，每一行都必须包含一个唯一的实体，而它们没有。在日历中，天是实体。

令人困惑的是，我们还将天分组为几周。人们很自然地认为一个月是几个星期的集合，但事实并非如此，它是几天的集合。一个月平均有 4.3 周。表中的一行不能包含一个实体的一部分或多个实体。

行 == 实体，列 == 属性

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

一个解法

对于我使用的这个演示<divs>，每天设置一个display: inline-block，但您可能想要使用一个<ol>. 在月/周/日视图之间更改时，天数流动良好（表格不可能）。对于多日活动，Javascript 可以做布局。

演示：http: //jsfiddle.net/ThinkingStiff/XXm8y/

输出：

在此处输入图像描述

脚本：

var events = [{ from: 3, to: 9 }, { from: 4, to: 4 }, { from: 9, to: 11 },{ from: 4, to: 12 }];

for( var eventIndex = 0, event; event = events[eventIndex], eventIndex < events.length; eventIndex++ ) {
    for( var dayIndex = event.from; dayIndex <= event.to; dayIndex++ ) {
        var dayElement = document.getElementById( 'day' + dayIndex ),
            firstDay = document.getElementsByClassName( 'event' + eventIndex ),
            top;
        if( firstDay.length ) {
            top = firstDay[0].style.top;
        } else {
            var eventCount = dayElement.getElementsByClassName( 'event' ).length;
            top = ( eventCount * 20 ) + 'px';
        };
        var html = '<div '
            + 'class="event event' + eventIndex + '" '
            + 'style="top: ' + top + ';">' 
            + eventIndex
            + '</div>';
        dayElement.insertAdjacentHTML( 'beforeEnd', html );
    };        
};
​

CSS：

#calendar {
    border: 1px solid black;
    height: 400px;
    width: 504px;    
}
.day {
    display: inline-block;
    height: 80px;
    position: relative;
    vertical-align: top;
    width: 72px;   
}
.day:nth-child( even ) {
    background-color: pink;
}
.day:nth-child( odd ) {
    background-color: lightblue;
}
.event {
    background-color: lightgrey;
    height: 20px;   
    position: absolute;
    text-align: center;
    width: 100%;
}

​</p>

HTML：

<div id="calendar">
    <div id="day1" class="day"></div><div id="day2" class="day"></div><div id="day3" class="day"></div><div id="day4" class="day"></div><div id="day5" class="day"></div><div id="day6" class="day"></div><div id="day7" class="day"></div><div id="day8" class="day"></div><div id="day9" class="day"></div><div id="day10" class="day"></div><div id="day11" class="day"></div><div id="day12" class="day"></div><div id="day13" class="day"></div><div id="day14" class="day"></div><div id="day15" class="day"></div><div id="day16" class="day"></div><div id="day17" class="day"></div><div id="day18" class="day"></div><div id="day19" class="day"></div><div id="day20" class="day"></div><div id="day21" class="day"></div><div id="day22" class="day"></div><div id="day23" class="day"></div><div id="day24" class="day"></div><div id="day25" class="day"></div><div id="day26" class="day"></div><div id="day27" class="day"></div><div id="day28" class="day"></div><div id="day29" class="day"></div><div id="day30" class="day"></div><div id="day31" class="day"></div>
</div>​
于 2012-07-11T21:14:47.140 回答