Calendar Semantics: Table or List

Many times, when a developer first begins to use proper HTML and CSS for markup and style, he or she has a tendency to disown tables and avoid their use at all cost. While thinking that way can allow a developer to discover many creative ways of using the newfound power of CSS, it can put someone at a severe disadvantage.

Is this Data Tabular or Not?

The next step for that up and coming developer is to begin to think about the content that is being marked up, and decide upon the most semantic solution. If data is tabular in nature, mark it up as such, don’t be afraid. Tables aren’t evil, it isn’t their fault they were abused for so many years. When I was first starting out with CSS I was ecstatic about its abilities and wanted to use it whenever possible. I came up with some really off the wall solutions for simple problems, and I’m sure other developers can say the same thing.

I Say Calendars are Tabular

The fact of the matter is — there’s still data that is tabular in nature and should be marked up as such. One example I’d like to talk about is a monthly calendar. When I was first asked to create a calendar after learning CSS, the first thing I thought to use was an ordered list. I was in an ‘anti-table’ mindset and I spent the next few hours coming up with a pretty nice looking calendar that was based on an ordered list. The only trouble was the semantics.

Things seemed to make sense at the time; a calendar was really just a list of the days in a particular month ordered from first to last, how is that tabular? What I didn’t take into account was the extra set of list items I had to include in order to provide the weekdays at the top. I also didn’t think about what the calendar would look like to someone browsing the site in a text based browser. I was a CSS fanatic and never wanted to see tables again.

Why is a Calendar Tabular?

In my opinion, a calendar should definitely be considered tabular data. Dates are placed in a particular position on a grid based on which weekday they fall upon. There is only one day per position on the grid, and they don’t overlap. The month and weekday names can be included in a table heading because that’s what they are — headings. They give meaning to the data included below in providing an explanation as to which weekday a particular date falls.

A Few Accessibility Notes

A tabular calendar will also render more nicely on a text based browser as opposed to a list. When viewing a list based calendar in a text only browser, you’re given a top down listing of each day followed by any content associated with that day. That’s fine, but you’re losing the convenience of knowing the associated weekday (which is now at the top of the list by itself). Viewing a tabular calendar in a text only browser should be quite similar to using a modern browser which supports CSS. You still have your table headings which make the data easier to understand, and the information is organized in a way you’d expect to see it.

Being that I don’t have exclusive access to a screen reader, I’m not positive as to what a tabular calendar would sound like to someone who is visually impaired. Using Fangs we can get an excellent insight, however. First you’re given information regarding the table itself; summary, number of rows, number of columns, and the table headings. You’re then guided day by day through the table. Unfortunately, we lose the advantage of knowing which weekday a particular date falls.

What I’m Trying to Say

All in all, I think that the attributes of a calendar match well with what a table has to offer. In my opinion, a calendar is semantically a table and should be marked up as such. The code behind a list based calendar is ineffective at best highly based upon the fact that an extra set of list items must be included in order to provide weekdays. An argument to that may be that you don’t want to include the weekdays in this particular calendar because you’re only including a very tiny instance in your sidebar. Personally, I don’t think that’s a very good excuse. If you don’t want the weekday headings to appear, set your thead to display:none;. Always keep semantics in mind, it will be a great help in the long run.