Geek Answers Handbook

Should the calendar be displayed using a table? Why does Google Calendar only use a table for columns?

This is not another general question such as "table versus div for general layout", for example the question why not use tables for layout " .

I am working on a schedule / calendar project, and I always assumed that the calendar would be an example of when to use the usage table. Although after a quick look at the Google Calendar structure, it seems that it consists of a table containing a <td> for each column and inside each column, the event is a <div> with an internal list of definitions.

Why is it profitable?

My own ideas:

  • Tables can be more complex for style, beautifully and compactly, when several events of different lengths occur simultaneously (starting from the same <td> ). The possibility of unwanted spaces.
  • It is more difficult to update tables when the user adds an event after the page loads, for example. with JavaScript (because the row / colspan of the table headers may change)
  • If tables were used, the width of the coincidences along the x-axis and the top headers and cells, as well as the height of the headers and cells of the y-axis, will be automatically matched. It is impossible to manage this without tables.

Is there any of this? Should tabular data always be stored in real 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 complete 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:

Remember to indicate why Google Calendar is structured as it is, for example. Why is there a table in Google Calendar, but use it only for columns?

+7
source share
3 answers

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

  • Rows with variable height cells are simpler in tables, although the same thing can be done with float and clearfixes. The approach to the table is likely not to break (and, of course, more compatible with ancient browsers), and is probably more effective for rendering the browser.
  • The flow of multi-day events is very difficult to control using CSS, but it is quite simple thanks to the use of colspan (even if it creates a relatively disgusting and meaningless markup).

(I ask a question elsewhere in StackOverflow about whether there is a reasonable and elegant way to achieve these goals without tables. See HTML markup for multi-day calendar events )

+3
source

Adam, this is a fantastic question.

I think a calendar is an ideal use for tables. You are right, tables are more difficult to style in most senses, but when you think about a real problem, this is what you prefer. Of course, you could technically build many modern sites with tables and not with divs, and that would be very difficult, but there was time and place for everything. In my opinion, it depends on preferences, and if you can write something with less markup, then this is what you should use ... even if it is considered bad practice by modern standards.

My vote for something square and unchanging, like a calendar ... Go with tables if it's a cheaper solution.

+2
source

Personally, I would go with a div instead of tables. This does not mean that the table is completely wrong: just a div can be much more flexible when it comes to styling them, especially if you add other elements (like a collection that can span 2 dates), etc.

A div would also help in a liquid layout more than a table could.

This is not tabular data, and I think it depends on how much you use its functionality and layout.

+2
source

More articles:


All Articles