Dreamweaver: When should you use Tables, Frames, Div tags, CSS, AP Divs, or Layers?

For years, Web designers used the HTML feature called Tables to create page layouts, now everyone is talking about Cascading Style Sheets, but how do you know when it’s best to use tables, CSS, or both, and what about layers, AP divs, and frames?

Today, most professional designers agree that the best way to create a Web page design is to use XHTML (eXtensible HyperText Markup Language) with Cascading Style Sheets.

But over the years, web design books (including a few I’ve written) have recommened web design options that aren’t the best choice anymore, such as Layers (now called AP Divs).

Here’s a quick look at the most common design options in Web design, followed by more detailed explanations of each.

• Tables: In the early days, most people used Tables to create layouts, and they’re still used for tabular data. Tables are ideal when formatting database or spreasheet content, as well as laying out columns and rows of information from a datases. (You’ll find a lesson on creating accessible tables on the Layers Magazine Web site.)
• Cascading Style Sheets (CSS): These days the most recommended approach to web design is a combination of clean XHTML code (using div tags and heading tags) with CSS. (Follow this link for an introduction to CSS, dive in with this CSS training video, or visit the Dreamweaver section to find Dreamweaver tutorials on CSS.)
• Layers and AP Divs: In Dreamweaver MX, MX 2004, and 8, there was a button for the Layer feature, and it offered an easy way to click and drag boxes using divs that were positioned with precision on a page. Layers were intuitive and popular among some designers for a while, but they create such inflexible layouts that they’re not well suited to the modern Web. In my early books and videos, I cover Layers because Adobe included many features for them in their program, but today, like most professional web designers, I no longer recommend Layers or AP Divs except in very special cases.
• Frames: If you’re still considing using Frames, stop yourself now. When HTML Frames first came along, many people were excited by the ability to display multiple pages in one browser window, which is also possible with iFrames. But few people use Frames anymore — they’re confusing and awkward by modern web standards.
• Todays Web sites are viewed on everything from large monitors to small cell phone screens. Using CSS you can help you create layouts that are far more flexible and adaptable for your users and for all the devices they may use to visit your site.

Creating page designs with HTML Tables

In the early days of Web design, most page layouts were on the Web were created with tables. By merging and splitting table cells and even adding background images, designers created complex Web designs with tables. CSS expands upon this concept by adding many new design options, including the ability to precisely add margins and padding around elements and better control of how and where background images appear.

The web design shown here for the ChocolateGameRules.com web site, provides an example of an old-school site created with the HTML table tag. As you see in this example, most designers turn off table borders by setting the table border to 0 to create cleaner layouts. Although you don’t see it, table cells surround each of the photos and captions in this two-column layout.

Although tables are no longer recommended for creating page layouts, they’re still considered the best way to format tabular data like you’d find in a spreadsheet program.

You can use tables to format a consistent collection of information, such as the list of trees for sale on the Dexter Tree Farm website, shown in this example, which uses a table to format a list of trees for sale.

Although I recommend that you redesign sites that use tables to create page designs, like you see above with the Chocolate Game Rules site, I do understand that many designers still find it easier to create layouts with tables, and not everyone has time to redesign their Web sites right away. I have to admit, I’ve been guilty of leaving a few sites online designed with tables long after I knew better.

That said, I recommend using CSS with clean XHTML today for all your Web page layouts (except when you are creating a layout for tabular data). Even then, I still urge you to use CSS to add any styling you want for your tables, such as background colors or padding.

To learn more about tables, you can visit the Chocolate game site,which I created to serve as an example of a site created with Tables and CSS, at www.chocolategamerules.com. Choose View –> Code in your web browser to see the underlying HTML and compare it with sites created using <div> tags and CSS. (I explain how <div> tags work with CSS in these tutorials.)

Considering design options with HTML frames

You won’t find any instructions on this site for creating frames, such as the Pink Flamingos site shown in this figure.

Frames enable you to display multiple Web pages in one browser window. Among Web designers, frames are a little like those plastic pink flamingos stuck in the front yards of so many homes in South Florida: some people love how kitsch they are, and others just think they are tacky. Although frames are still used on the Web, most designers don’t like them because they can make navigation confusing.

Frames are also problematic because when you use frames, the URL at the top of a Web browser does not change, even when you click on links and change the pages displayed within frames. As a result, you can only bookmark, or create a link to, the first page of a site that uses frames. Worse yet, search engines have a hard time properly indexing a site designed with frames, which can diminish your site’s search engine ranking.

Using layers (or AP Divs) to create designs

In Dreamweaver MX, MX 2004, and 8, a Layer feature offered an easy way to click and drag boxes that designers could position with precision on a page. Starting in version CS3 and continuing in version CS5, Adobe changed the name to AP Divs. Divs are simply XHTML <div> tags that serve as dividers in a page. Essentially, they create boxes around content, where the content between the opening and closing <div> tags is considered a box.  By organizing content in this way, designers can position sections of text or images independently. Don’t be confused by the fact that I (and most other Web designers today) recommend using <div> tags with CSS to create your page layouts. We just don’t recommend that you do so with the AP Divs (except in a few special cases).

AP Divs, as the name implies, are <div>tags that include styling information that adds absolute positioning. That means when you place an AP Div in a Web page, it stays where you put it, no matter how much space you have in the browser window. This may seem like a good idea at first, and AP Divs were popular among some designers for a while because they are so easy to use and so similar to many of the features in desktop publishing programs (such as Adobe InDesign). But because AP Divs create such inflexible layouts, they don’t adapt well to the changing environment of the Web, where different-sized monitors and other display variations can lead to cut-off text and other undesirable results in AP Div-based designs.

Many designers use AP Divs on occasion to add immovable elements, such as a logo anchored to the top left of a page, to a page layout, but creating an entire design with this feature is no longer recommended.