This week I was putting together some general web development guidelines for our team (ill publish these at some point when they are a bit more mature – we based some of them on these great css guidelines.
We are developing a new version of an existing site and one of the items that came up was the use of tables in html for layout.
One of my colleagues forwarded me a link about why tables for layout are bad (http://www.hotdesign.com/seybold/index.html). It’s a bit dated but most of the advice is still relevant.
Unfortunately what most developers have heard (and took from that article judging by the emails I received) was that tables are universally bad.
Of course this isn’t the case and few things are universally bad (apart from maybe the marquee tag and Microsoft SharePoint).
Tables are entirely appropriate for tabular data.
In fact lets go to the source and refer to the HTML5 spec – crazy eh? and see what it says about the table element
“The table element represents data with more than one dimension, in the form of a table”
And it goes on to say:
“Tables should not be used as layout aids”
The spec even goes into great detail about how to add further information to your tables (and when not to).
The reason tables are bad when used for layout are:
- CSS is a better and more flexible way to lay out a webpage
- Tables result in verbose html resulting in bigger slower loading pages
- Tables are arguably harder to maintain consistent layout
- Tables probably lock you into a particular layout
- Accessibility issues – screen readers dont cope so well with tables
- Can prevent incremental rendering and encourage reflow
- You are abusing the elements purpose and they can encourage layout mark-up on the page itself
- It can be tricky to get tables looking right across all browsers
- SEO – I am not sure how much of an issue this is but we will go with it for now..
Some examples of where tables might be appropriate:
- Comparison grids
- Lists of results*
So if you have some tabular data like then go ahead and use a table.
One of my colleague’s pointed out all some big sites such as Google & Amazon using Tables to lay out the page. I suspect the Google example was to do with avoiding the need for an additional request but its also important to note that these sites have pretty simple designs and you’d quickly get into a mess with something more complex.
- Tables bad for layout
- Tables are appropriate for tabular data
*Interestingly if you take a look at most large sites search results e.g. Amazon, Expedia you will find the results laid out using a divs rather than tables. I think it’s probably the way I would go too as I suspect it would be easier to style, maintain and less verbose.