Should a calendar by represented using a table? Wh

问题:

This is not another general 'tables versus div elements for general layout' type question, like the "why not use tables for layout" question.

---

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.

Why is this beneficial?

My own ideas:

• 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?

---

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 -->

The following is a full example:

<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 -->

---

Edit:

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?

回答1:

Personally, I'd go with div's instead of tables. That's not to say table's are entirely wrong, it's just that div's can be much more flexible when it comes to styling them, especially if you're adding other elements (such as a meeting that might span 2 dates) etc.

Div's would also help in a fluid layout more so than a table might.

It both is and isn't tabular data, I guess it depends on how far you're taking it's functionality, and layout.

回答2:

I think there are two main reasons to use a table for displaying calendars:

1. Rows with variable height cells are simpler in tables, though the same thing can be accomplished with floats and clearfixes. The table approach is more likely to not break (and certainly more compatible with ancient browsers), and is probably more efficient for the browser to render.
2. The flow of multi-day events is very hard to manage with CSS, but it's pretty simple through the use of colspan (even if it does produce relatively hideous and non-semantic markup).

(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)

回答3:

Adam, that's a fantastic question.

I think a calendar is the perfect use for tables actually. You're right, tables are harder to style in most senses, but when you think about the real issue, it's what you prefer. Sure, you could technically build a lot of modern websites with tables rather than divs and it'd be really tough, but there's a time and a place for everything. It comes down, in my opinion, to preference and if you can write something with less markup, then that's what you should use... even if it's considered bad practice by modern standards.

My vote is for something as square and unchanging as a calendar... go with tables if that's the cheaper solution.