Musings

The thoughts of one young developer

Why Not Use HTML Tables for Layout?

Aside: This question was originally asked on WebDesign.StackExchange.com, a private beta that ended up being deleted on October 6th, 2014.

Why should I not use a table for my layout?


This question has been discussed on Stack Overflow as well as many other sites. I’ll summarize the main points here.

We should use tables, but only for tabular data because it is incorrect, and more difficult to use tables for layout.

  • It’s invalid HTML to use tables for layout as of HTML 4.01
  • Tables take longer to render due to the in depth calculations for positioning/sizing
  • Tables are not very accessible – screen readers usually do a poor job of reading them
  • Tables are (relatively) inflexible – developing for mobile, getting exact widths and positioning is often difficult
  • Tables are often bad for SEO because crawlers have a difficult time parsing the content
  • Tables prevent incremental rendering – i.e. the whole thing waits until it shows
  • Tables make it more difficult to use images because they sometimes have to be cut up into smaller ones
  • Tables don’t always print well
  • Tables restrict the design to certain layouts ex. is child with height:100% of page
  • Tables make redesigns much more difficult – the same goes for updates

Again, tables for tabular data is okay – for anything else it’s not