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

Comments

  1. 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. :)


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


  3. Pingback by On Calendars, Lists, Tables and Semantics - CSSnewbie

  4. Pingback by Nono Martínez » ¿Se han convertido las listas en las nuevas tablas?

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


  6. Pingback by Codigos Web » Blog Archive » ¿Se han convertido las listas en las nuevas tablas?

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


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


  9. 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?


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


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


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


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


  14. Web Design Says:

    Honestly, I do not see any wrong in using lists as part of calendars. Unlesss the requirement demands something else.


  15. Jacques Lemans Says:

    I personally believe that there is NOTHING BAD in using lists as part of calendars.


  16. sendetiklat Says:

    > “If you enjoyed this post, why not subscribe to Unintentionally Blank”
    I’ve enjoyed this post and I’ve subscribed. Thanks…


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


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


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


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


  21. 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/


  22. foam Says:

    This article has helped me a lot. I bookmarked it in case I need to visit your site again for fresh articles.


  23. Employee Rights Says:

    Hi! I thought your post was cool and will visit often.


  24. 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!!!


  25. pdf-searchengines Says:

    mm nice trick.. You have advance css knowladge..
    thanks for the sharing
    regard
    http://justfreemp3.com


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


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


  28. Sunil SEO Says:

    Nice Post
    Thanks for sharing nice post sharing with us.I agree with you.Use the right tool for the job


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


  30. 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!


  31. The Woodlands Real Estate Says:

    Great post. This was a very insightful talk about lists or tables.


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


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


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


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


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


Leave a Comment