Why You Should Avoid Tables for Web Page Layouts

CSS is the best way to build web page designs

Young developers working in their start-up home office. They are brainstorming, woman holding pencil and writing while talking with her coworker. They are collaborating. Top view. Location is released.
vgajic/Getty Images  

Learning to write CSS layouts can be tricky, especially if you are familiar with using tables to create fancy web page layouts. But while HTML5 allows tables for layout, it is not a good idea.

Tables Are Not Accessible

Similar to search engines, most screen readers read web pages in the order that they display in the HTML, and tables can be very hard for screen readers to parse. The content in a table layout, while linear, doesn't always make sense when read left-to-right and top-to-bottom. Plus, with nested tables, and various spans on the table cells can make the page difficult to figure out.

This is the reason that the HTML5 specification recommends against tables for layout and why HTML 4.01 disallows it. Accessible web pages allow more people to use them and are the mark of a professional designer.

With CSS, you can define a section as belonging on the left side of the page but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.

Tables Are Tricky

Even if you create a table with a web editor, your web pages will still be complicated and difficult to maintain. Except for the most simple web page designs, most layout tables require the use of a lot of and attributes and of nested tables.

Building the table may seem easy while you're doing it, but once it's done you need to maintain it. Six months down the line it may not be as easy to remember why you nested the tables or how many cells were in a row and so on. Not to mention, if you maintain web pages as a team member, you have to explain to everyone involved how the tables work or expect them to take additional time when they need to make changes.

CSS can be complicated as well, but it keeps the presentation separate from the content and makes it much easier to maintain in the long run. Plus, with CSS layout you can write one CSS file and style all your pages to look that way. Then when you want to change the layout of your site, you simply change one CSS file, and the whole site changes—no more going through every page one at a time to update the tables to update the layout.

Tables Are Inflexible

While it is possible to create table layouts with percentage widths, they are often slower to load and can dramatically change how your layout looks. But if you use specified widths for your tables, you end up with a very rigid layout that won't look good on monitors that are sized differently from your own.

Creating flexible layouts that look good on many monitors, browsers, and resolutions is relatively easy. In fact, with CSS media queries, you can create separate designs for different size screens.

Tables Hurt Search Engine Optimization

The most common table-created layout uses a navigation bar on the left side of the page and the main content on the right. When using tables, this approach (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based on the content, and many engines determine that content displayed at the top of the page is more important than other content. So, a page with left-hand navigation first, will appear to have content that is less important than the navigation.

Using CSS, you can put the important content first in your HTML and then use CSS to determine where it should be placed in the design. This means that search engines will see the important content first, even if the design places it lower down on the page.

Tables Don't Always Print Well

Many table designs don't print well because they are simply too wide for the printer. So, to make them fit, browsers cut the tables off and print sections below resulting in disjointed pages. Sometimes you end up with pages that look okay, but the whole right side is missing. Other pages will print sections on various sheets.

With CSS you can create a separate style sheet just for printing the page.

Tables for Layout Are Invalid in HTML 4.01

The HTML 4 specification states: "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media."

So, if you want to write valid HTML 4.01, you can't use tables for layout. You should only use tables for tabular data, and tabular data generally looks like something you might display in a spreadsheet or possibly a database.

However, HTML5 changed the rules and now tables for layout, while not recommended, are considered valid HTML. The HTML5 specification states: "Tables should not be used as layout aids." This is because tables for layout are difficult for screen readers to differentiate, as previously mentioned.

Using CSS to position and layout your pages is the only valid HTML 4.01 way to get the designs you used to use tables to create, and HTML5 strongly recommends this method as well.