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/
19March 14th, 2010 at 3:19 pm
foam Says:This article has helped me a lot. I bookmarked it in case I need to visit your site again for fresh articles.
20March 14th, 2010 at 3:20 pm
Employee Rights Says:Hi! I thought your post was cool and will visit often.
21March 29th, 2010 at 1:27 pm
UK Website Design Company Says:Hey guys.. i think the only disadvantage of using tables are sometimes page gets slow and google doesnt give high quality scores to table sites..i think google prefers tabbleless. i can say this because when i perform PPC , i get high quality score on div sites as compared to table sites.. But personally, i prefer table calendars etc but what to do..you have to go with the flow!!!
22May 12th, 2010 at 11:45 am
pdf-searchengines Says:mm nice trick.. You have advance css knowladge..
thanks for the sharing
regard
http://justfreemp3.com
23June 3rd, 2010 at 9:06 am
Astralus Says:The best way to develop your site or blog - just sharing your RSS. or If you made a flash site do a background html for best indexing of your site.
24June 8th, 2010 at 1:16 pm
Akina Says:For me, there’s nothing wrong on using list… But if there is something that can be better then i am open in trying.
25June 25th, 2010 at 12:42 pm
Sunil SEO Says:Nice Post
Thanks for sharing nice post sharing with us.I agree with you.Use the right tool for the job
26July 21st, 2010 at 1:00 pm
Web Developer Says:A few years back and I would have agreed with you, I clung on to my nested tables with grim determination until I finally embraced tableless XHTML & CSS. To be honest I’ve never looked back and would even do a grid in CSS now, I can’t even think of a situation where I’d use tables, even in the example you gave above!
Wait, I just remembered, our company email newsletter still uses tables, but that’s for compatibility purposes.
27July 22nd, 2010 at 10:19 am
James | Web Design NI Says:If you check out most of the plugins for Wordpress that are geared to integrating calendars, they certainly aren’t optimal and aren’t as semantic as they could be. Someone needs to clean them up!
28August 8th, 2010 at 3:20 am
The Woodlands Real Estate Says:Great post. This was a very insightful talk about lists or tables.
29August 12th, 2010 at 9:06 am
seo tutorial Says:I visited those sites and saw the demo and downloaded some of them. they are really good and mind blowing. thanks for sharing with us.
30August 16th, 2010 at 2:29 pm
global Says:This is a good post. This post give truly quality information.I’m definitely going to look into it.Really very useful tips are provided here.pajama
thank you so much.Keep up the good works.
31August 16th, 2010 at 6:57 pm
boys' bikes Says:Well lists are the way to go really, aren’t they? But tables are so much easier to use! Should they really be considered that bad? I don’t think so really.
Ste @ girls’ mountain bike.
32August 26th, 2010 at 11:08 pm
markos k Says:I agree with you lemans ..is nothing bad to using lists as part of calendars.
http://directory2009.com/suggest-listing.php?id=0
33August 27th, 2010 at 2:41 pm
Graham Says:I prefer tables and using the above tip makes adding a calender to a webpage simple, so much so even I can do it!
Graham @ LCD enclosure.