From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

I've been focusing on CSS positioning and creating tableless (and frameless) layouts, but maybe you don't really understand why you want to do this. After all, there are still people using browsers that don't reliably support these types of layouts. Plus, they can be harder to build, and most HTML editors don't yet support them. But there are still many reasons to learn how to write CSS layouts.

Valid XHTML

This is the number one reason to use CSS for layout. If you use tables for layout, you are writing invalid XHTML. Tables are only valid in XHTML when displaying tabular data. For example, the data in the accompanying image is something that might be created from a spreadsheet or database. It is "tabular data" and should be displayed in a table.

Using CSS to position and layout your pages is the only valid way to get the designs you used to use tables to create.

Tables Can Be Tricky

One of the most common problems with beginning Web developers is pages that are completely blank in some Web browsers. This is usually caused by tables that are created incorrectly, either with missing tags or not closing tags. And even if you have all the tags, if you don't have them lined up exactly right, complex layouts can become big messes. And once the design is created, they are usually very difficult to edit and maintain.

While you might argue that CSS positioning is difficult to learn, you'd be surprised at how easy it can be to maintain. In many cases, it's just a matter of a <div> element surrounding the different sections of your text, and you're done.

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.

Clearly, you can create CSS layouts that only look good in one browser, but it is actually a lot easier to create layouts that are flexible than you would think.

Nested Tables Load More Slowly

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 Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them. And in Netscape 4, the page won't display at all.

There's not much to say about CSS layouts. They load faster. If only because there is less code.

Tables 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.

Tables Aren't as Accessible

Just like search engines, most screen readers read Web pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation.

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 Don't Always Print Well

If you've ever tried to print an About Web page, you know that tables don't always print well. 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 actually create a separate style sheet just for printing, but that's another article.

The Moral - Learn to Use CSS

For some reason, CSS positioning has been a big resistance for many HTML developers. But even though you've been using tables to design your Web pages this long, it's time for a change. Take the plunge and learn to use CSS. You won't be sorry.

Previous Features