Dreamweaver CS4: The Missing Manual

Chapter 7. Tables

The HTML <table> tag has had a somewhat infamous existence in the world of Web design. It was originally intended to present scientific research in a spreadsheet-like manner. But as the Web grew, graphic designers got into the Web design game. They wanted to recreate the types of layouts seen in magazines, books, and newspapers (in other words, they wanted to make good-looking Web sites). The most reliable tool at the time was the <table> tag, which designers morphed into a method for creating columns, sidebars, and, in general, precisely positioning elements on a page.

The wheel has turned again. Today, with nearly everyone on the planet using advanced Web browsers like Internet Explorer, Firefox, Safari, and Opera, a newer method—CSS-based layout—is now the most common technique for professional Web design. Table-based layout is an aging dinosaur that produces pages heavy with code (meaning they download slower), are hard to update, and are hostile to search engines and alternative browsers such as screen readers, mobile phones, and text-only Web browsers.

This chapter shows you how to use tables for their intended purpose: displaying data and other information that’s best presented in rows and columns (see Figure 7-1). If you’re a long-time Web designer who still uses tables for page layout, you can still use Dreamweaver and the instructions in this chapter to continue that technique. However, you’re better off in the long run making the switch to CSS-based layout. ...