1. Technology

Don't Use Tables for Layout

CSS is the Best Way to Build Web Page Designs

By

Tabular Data

Tabular Data

Jennifer Kyrnin

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. For many reasons.

Tables Are Not Accessible

Just like search engines, most screen readers read web pages in the order that they are displayed in the HTML. And tables can be very hard for screen readers to parse. This is because 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 very 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 very complicated and difficult to maintain. Except for the most simple web page designs, most layout tables require the use of a lot of colspan and rowspan attributes and of nested tables.

Building the table may seem easy while you're doing it, but then 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. Plus, if you maintain web pages as a team member, you have to explain to every person 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 HTML, 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. And when you want to change the layout of your site, you simply change one CSS file, and the whole site chnges—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 in many monitors, browsers, and resolutions is relatively easy. In fact, with CSS media queries, you can create separate designs for different size screens.

Nested Tables Load More Slowly than CSS for the Same Design

The most common way to create fancy layouts with tables is to “nest” tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the web browser to render the page.

In most cases, a table layout uses more characters to create than a CSS design. And fewer characters means less to download.

Tables Can Hurt Search Engine Optmization

The most common table created layout has a navigation bar on the left side of the page and the main content on the right. When using tables, this (generally) requires that the first content that displays in the HTML is the left-hand navigation bar. Search engines categorize pages based upon 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 will cut the tables off and print sections below resulting in very 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.

But HTML5 changed the rules and now tables for layout, while not recommended, are now valid HTML. The HTML5 specification states:

Tables should not be used as layout aids.

Because tables for layout are difficult for screen readers to differentiate, as I mention above.

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.

Tables for Layout Can Affect Your Job Prospects

As more and more new designers learn HTML and CSS, your skills at building table layouts will be in less and less demand. Yes, it's true that customers don't typically tell you the exact technology you should use to build their web pages. But they do ask you for things like:

  • Accessible web pages—designs that can be viewed by screen readers are being mandated by many countries and corporations find accessibility more and more important everyday
  • Maintainable web pages—designs they can take with them even if you aren't going to maintain them in the future
  • Flexible designs—designs that work across many browsers, resolutions and devices
  • Fast downloading pages—speed is becoming more and more important, even to SEO
  • Printable designs—pages that print without special scripts or extra pages

If you can't deliver what the clients ask for, they will stop coming to you for designs, perhaps not today, but maybe next year or the year after. Can you really afford to let your business suffer because you aren't willing to start learning a technique that has been in use since the late 1990s?

The Moral—Learn to Use CSS

CSS may be difficult to learn, but anything worthwhile is worth the effort. Don't keep your skills from stagnating. Learn CSS and build your web pages the way they were meant to be built—with CSS for layout.

©2014 About.com. All rights reserved.