Tables Or Lists - The HTML Calendar Debate
Posted on Wednesday, June 25th, 2008
Lists are semantic, tables are bad, right?
What seems to be the view of some in web development is now finally coming under scrutiny as mistakes are made. Put it this way, tables aren’t always bad and lists aren’t always semantic, context is important. The examples that have brought this to my attention have been quite surprising because of the amount of effort it has taken to create them.
CSS Calendars
First, a week ago Rob Glazebrook posted a list based CSS calendar at CSS Newbie and that was followed up by Chris Coyier and Tim Wright’s elastic, list based CSS calendar at CSS Tricks. Hacks and unsolved problems aside my belief is that their solutions are taking both the creators and the readers of the respective blogs down the wrong path (though thankfully Tim and Chris did finish with a disclaimer it was perhaps a little bit too far into the small print for the first few commenters who thought it was a great idea).
While I don’t disagree that a month is a ordered list of days I don’t think the markup chosen is as semantic as it can be for the presentation Rob, Tim and Chris were aiming for. As it happens there are physical calendars that are set out in a vertical list and it is perfectly reasonable to set things out as a list of days. However, grid based calendars are, well, a grid. A grid where the columns relate to days of the week as well, so why not take advantage of that.
Use the right tool for the job
I won’t say any more for now, just show some examples that I thought I’d come up with to illustrate the point. Here is a calendar using Rob’s list markup (minus the invalid clearing div as a child of the ordered list) followed by the same calendar created using a table. As you can see, with no CSS, the table is already part of the way towards the layout the list based calendars were aiming for and, because I added days of the week at the top as <th> with a scope of col a screen reader will read out the day of the week for each cell in the table it reads adding to the accessibility. To show why using the correct tool for the job makes life a lot easier, I even tidied up the table based calendar with just 4 CSS rules.
When you are creating a list of days in a month, a list is perfect, when you are creating a grid of columns of days a table suits the job. Just because you can use something else doesn’t mean you have to, the right tool for the right job not only makes your life easier but makes more sense on the page too. Have a look at my examples and decide for yourself.
If you enjoyed this post, why not subscribe to Unintentionally Blank
1June 25th, 2008 at 1:32 pm
Mike Robinson Says:I completely agree with you! I never understood why people used lists to make calender tables. However, I’m keen to read your thoughts on lists as part of form mark-up, for more complex styling situations. :)
2June 26th, 2008 at 11:07 pm
Phil Says:Hi Mike, I’m glad to see you haven’t got caught up in the folly that all tables are bad! I’ll have a think about forms and lists and send out a post next week with what I come up with.
Pingback by On Calendars, Lists, Tables and Semantics - CSSnewbie
July 3rd, 2008 at 1:59 am
Pingback by Nono Martínez » ¿Se han convertido las listas en las nuevas tablas?
July 10th, 2008 at 7:58 am
3August 16th, 2008 at 4:28 pm
Ojuicer Says:That list based CSS calendar mark-up looks awfully like a table already. When you start reinventing tables then it’s quite obviously the wrong tool for the job.
Pingback by Codigos Web » Blog Archive » ¿Se han convertido las listas en las nuevas tablas?
September 1st, 2008 at 5:54 pm
4September 15th, 2008 at 3:45 pm
xHTML Coding Says:I personally believe that there is NOTHING BAD in using lists as part of calendars.
There is a problem with mark-up tool redundancy problems, but the list type styling really does pep things up a bit!
5November 8th, 2008 at 4:53 pm
Webtlk Says:a month in an old fashioned list? ? i dont even know why people still use it! personally i go for the nice grid based calendars
6December 2nd, 2008 at 12:43 pm
David Says:I’m not so sure about the tables even in this instance. Sure its probably exactly the type of place where you are encouraged to use a table, but if having a list and using css makes it easier for the server and quicker for the user then surely thats the way to go?
7December 17th, 2008 at 9:23 am
Josh Says:I think that as long as it works and is functional.. use it, unless of course it is causing an undue load on a server. I do prefer the grid style calendar myself however. Josh.
8February 22nd, 2009 at 1:12 pm
codeidol support Says:I also think, that as long as it works and is functional.. use it, unless of course it is causing an undue load on a server. I do prefer the grid style calendar myself however.
+1
9February 23rd, 2009 at 11:24 am
Jerry Says:That’s the great thing about using CSS calender.That list based CSS calendar mark-up looks awfully like a table already. When you start reinventing tables then it’s quite obviously the wrong tool for the job.
10April 1st, 2009 at 10:43 am
Bobrick Says:Semantically a calendar is always a list, perhaps a list of lists (month is a list of weeks, week is a list of days, day is a list of hours). In a table each column in a row should be related to the row in question, in a table based calendar layout this isn’t so.
11April 17th, 2009 at 6:40 pm
Web Design Says:Honestly, I do not see any wrong in using lists as part of calendars. Unlesss the requirement demands something else.
12July 8th, 2009 at 3:31 pm
Jacques Lemans Says:I personally believe that there is NOTHING BAD in using lists as part of calendars.
13August 6th, 2009 at 6:48 pm
sendetiklat Says:> “If you enjoyed this post, why not subscribe to Unintentionally Blank”
I’ve enjoyed this post and I’ve subscribed. Thanks…
14August 8th, 2009 at 8:14 pm
Rob Says:Interesting article.
Personally I don’t see a huge problem of having a calendar with lists as long as you have some sort of spec/requirement that would force you to use something else. I also like to see articles like this, as it proves tables are’t defunct - surprisingly something a lot of people seem to think.
15October 17th, 2009 at 4:20 am
Sam Says:This is probably a bit too late to add, but anyway add:
table { border-collapse: collapse; }
it removes the gaps between borders and significantly improves the look with one simple addition :)
Sam
16October 17th, 2009 at 7:40 pm
Jake Says:KISS - A bunch of CSS hacking makes no sense when you could simply write up a table in a few seconds. A table will work fine across all browsers. CSS hacks break and need constant checking.
17November 9th, 2009 at 5:09 pm
John Says:Agree! The right tool for the job only makes sense. While divs and lists are the “in” thing nowadays, there is really no point to use it if you only make things harderr just because you wanna hop on the bandwagon. Calendars are one example. Must be a nightmare to create one without using a table. But my page’s layout, no way I’m gonna put it in a table. Div wins! Enough said. :D
18November 9th, 2009 at 6:39 pm
Rob Says:Nowadays people see the word table and instantly think you’re wrong. Granted, using a table for a web layout isn’t exactly good practicer nowadays, but tables do have their use.
Tables are mean to display display tabular data and there’s nothing wrong at all in using them for this. I really can’t think of a better example than using a table to display a caender :) Personally, I wouldn’t want to make a calendar using anything other than a table.
Take the example of the widely used JQueryUI and the datepicker - that uses a table for the calendar - http://jqueryui.com/demos/datepicker/