Moving Away from Tables for Layout

One of the most widespread uses for a table is as a layout device (sometimes called layout tables ). You can create tables on your page, then use the table cells to contain the text and images on the page. Because you have good control over the size of the cells and the position of their boundaries, you can line up and lay out elements on the page with precision, though it often requires some extremely complex tables. By hiding the borders of the table cells , the site visitor doesn't notice the tables. This, up until the last few years , is how most nicely designed Web pages you've seen were created.

However, there are many problems with using tables for layout. First of all, the table has nothing to do with the content of the page (the information your visitor sees); all it does is affect the presentation of the content. One of the biggest benefits of CSS is that it separates content from presentation. As a result, you can completely redesign CSS-based sites largely by changing one file, the style sheet. If your presentation is mixed with your content, as it is with a table-based layout, it makes site redesigns difficult and expensive. Similarly, tables make it difficult to maintain visual consistency throughout a site (because the layout tables on different pages may not be the same).

So that's what is wrong with tables from the standpoint of the Web designer, but there are problems for the site visitor, too. Tables make the size of an HTML page unnecessarily large (costing you extra bandwidth charges), and site visitors must download the layout tables on every page they visit in the site (ditto). Pages load slower than with a CSS-based layout, and slow page loads drive visitors away. Table-based pages are also much more difficult to read by users with disabilities and by visitors using cell phones and PDAs.

Tables were necessary for good-looking Web sites back in 1997, because the Web browsers of the day had many limitations, not the least of which was that none of them supported the then-emerging CSS standards for layout. But all modern browsers have reasonably good support for using CSS for layout (though ironically, the most widely used browser as of this writing, Microsoft Internet Explorer 6 for Windows, lags well behind other browsers such as Mozilla Firefox, Apple Safari, and Opera). The vast majority of users of the Web now use Web browsers that can handle CSS-based layouts just fine.

As a result, you can (and should!) use Dreamweaver to build great-looking, CSS-based sites that are faster to load, accessible for everyone, and easier for you to redesign and maintain. To learn more about laying out your pages with CSS, see Chapter 6.

Because table-based layout has been so pervasive for almost a decade , Dreamweaver still has tools that make it easy for you to create page layouts with tables. You'll find more about those tools at the end of this chapter in the "Using Table Layout Mode" section. We've covered these tools for completeness, even though we don't recommend that you use tables for layout. Also, we figure you may be coming here after reading some other books, such as Creating a Web Page in Dreamweaver: Visual QuickProject Guide , which solely uses the table-based layout method. If all you know is table-based layout, you might wonder why we didn't cover it, so we have briefly done that to avoid confusion between books that use older layout methods and this book.

By the way, even with sites that use tables for layout, you can still use CSS to style the text inside the tables. Some CSS markup is devoted to styling text, and some is devoted to positioning elements on the page. You can use the styling kind of CSS to make your text look good, even inside a table. You just shouldn't mix the positioning elements of CSS with tables; choose one method or the other for positioning elements on your pages.