Why you shouldn’t use tables for layout. Ever.

html code

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.

Accessibility

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.

Accessibility of different devices
SEE ALSO: Don’t do “skip to content” links wrong

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

man with clock
SEE ALSO: Creating websites has never been so time-consuming

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.

2 thoughts on “Why you shouldn’t use tables for layout. Ever.”

  1. The idea that you should change a website style because of blind people is ridiculous. Their numbers are tiny and I didn’t expect them to be able to use mine anyway.

    1. That’s an ignorant attitude John Smith. When you go blind, you’ll be eating those words.

      The truth of the matter is that not including accessibility in your website can get you sued for discrimination. Adding accessibility to your website is not only a good practice, but it often improves usability for all users.

Leave a Reply

Your email address will not be published. Required fields are marked *