Should a calendar by represented using a table? Why does Google Calendar only use a table for the columns?

Question

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?

Actually, the fact that `
` is not allowed as a child of `
` is likely to be the bigger problem. Remember that the purpose of HTML markup is to convey *information*, media independently. Looking at this particular sample, I'd say it did that OK, but it would take a larger sample to be sure. Are there any `` elements for example? What is their content? — Alohci, Apr 08 '12 at 00:38
@Alohci Why would that actually be a problem? (the HTML is added with AJAX and it's not going to be validated or anything). Well, if you want a bigger sample, just go to Google Calendar and open the HTML of the calendar using Firebug, etc. There aren't any `` elements. — Adam Lynch, Apr 08 '12 at 17:06
What is the meaning of a `
` as a child of a `
`? Is it part of the term(name) or of the definition(value)? If you had to expose that to the platform accessibility API, how would you do it? Since its meaning is not defined, what is the likelihood that different browsers will expose it to that API in the same way? If they do not, what are screen readers to make of it? I don't know the answers to these questions. Unless you do, I suggest that it would be wise to steer clear of creating such DOM structures. — Alohci, Apr 08 '12 at 17:42
@Alohci I'm not sure you understand that the HTML is from Google Calendar. I didn't write it, so I don't know. I wouldn't have that `
` inside the `
`, that's just how Google do it. All of the calendar HTML is brought in with JavaScript, I don't know if screen readers can even handle that. — Adam Lynch, Apr 08 '12 at 17:58
I understand the source. You were asking about the appropriateness of supplying the data in an unconventional way. I was merely pointing out that in the bigger picture, the point you were asking about wasn't IMO, as significant as another issue in the markup. It was just a comment. Then you asked why was it a problem, and I tried to explain. FWIW, screen readers can certainly cope with a DOM built and modified with JS. If you're interested in learning more, you should investigate "Accessible Rich Internet Applications" (WAI-ARIA) — Alohci, Apr 08 '12 at 19:23

score 3 · Answer 1 · answered Apr 08 '12 at 00:29

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.

score 3 · Answer 2 · edited May 23 '17 at 12:02

3

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

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

edited May 23 '17 at 12:02

Community

1
1

answered Jul 12 '12 at 14:51

Michael Hellein

4,378
1
25
21

The answer to your question would help me too – Adam Lynch Jul 12 '12 at 15:56
Good to hear I'm not alone. :) Currently, I'm leaning toward a table implementation, but I'd really like to be able to implement something more semantic and more responsive (like https://pittsburghkids.org/calendar - which has no multi-day events). – Michael Hellein Jul 12 '12 at 16:20

score 2 · Answer 3 · answered Apr 08 '12 at 00:24

2

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.

answered Apr 08 '12 at 00:24

cereallarceny

4,913
4
39
74

1

The shape of what you're creating shouldn't matter, the semantic meaning and purpose of it do. That a calendar may be square and a table also is square does not justify using a table for a calendar. Answering "yes" to "is a calendar a table?" is. – Andrew Marshall Apr 08 '12 at 00:36
But is a table not tabular data? It's a table of dates and events? Also using th, rows and cols attributes allows for a semblance of semantically marking up day names, weeks etc. – Ric Sep 02 '14 at 15:38
I believe because people think of calendars as tabular data both in the virtual as well as physical worlds that we should represent it as such in our HTML code. There's inherently no issue with doing so, and it's simply a matter of desire. It's also worth mentioning that if there's any CSS reset code involved in making HTML elements more tabular for the display of a calendar, that could complicate your code. Just some two cents! – cereallarceny Sep 02 '14 at 16:15

Should a calendar by represented using a table? Why does Google Calendar only use a table for the columns?

Why is this beneficial?

Edit:

3 Answers3

Linked