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?

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