I’m ashamed to say that when I first started creating websites, I used HTML tables for layout. But that was a long time ago before I realised how bad they are for accessibility, and the problems they cause for disabled users.
Why are tables bad?
Tables were intended to be used for holding tabular data, and never intended for the positioning of layout elements on your page. This alone doesn’t mean you shouldn’t use them, but indicates a reason that you should use something else. At the end of this article I’ll explain why CSS is a much better solution.
One of the main problems with using tables for layout is accessibility. Remember that not everyone will be viewing your website the way you are. Some people will be using different browsers, sometimes older browsers, sometimes more advanced browsers. If you’re not creating your webpage in a standard way, there’s no way to tell how it’s going to look on different computers.
Most different are blind or partially-sighted users. These might have a browser that reads out the information on the page to them (called a screen reader), and the information needs to be structured in a way that makes the most sense to them, or they might hear nonsense. The way you order content inside a table might look sensible to you, but imagine if the content for that table was being read out, would it still be in a sensible order? A screen reader would most likely read out content in a table the same as the tab order, try pressing tab while you’re in a table and see which cell it skips to next, it might not be a sensible order and could make your site unusable for a blind user.
Page load speed
Webpages using tables for layout take longer to load, it takes longer for the browser to work out where the table should sit on the page. This often leads to the table jumping about on your page or resizing itself while the page is still loading, especially if you’ve nested a table within another.
Tables don’t always print well
Depending on which browser you’re using, webpages using tabular data might not look quite right when you print them out. The best way to control what your page looks like when printed is to specify a print stylesheet.
Use CSS for a better solution
Instead of using tables for layout, using CSS will give you a lot more flexibility and control over the layout of your page. It’ll make your page faster to load and it’ll also make it much easier to update the style of your site in the future.
With CSS you can take a HTML document that has the content in the correct order for screen readers, and apply a stylesheet so that everyone with a normal browser can see your design. You also have the flexibility to provide different stylesheets for different browsers (if you need to), including showing a different stylesheet to mobile users who have a much smaller screen.
Tables still have their place
Of course, HTML tables were invented for a reason, which is to display tabular data. As long as you use tables for tabular data only, and never nest a table inside another table, you’re using them correctly and as intended.