Dreamweaver Design Challenge: Tables vs. Layers

This work is licensed under a Creative Commons License.

Dreamweaver Design Challenge: Tables vs. Layers

Is it better to use layers or tables to design a Web page? We explain the pros and cons of each.
Written by Janine Warner on October 6, 2006
Tutorial compliments of "Layers" magazine

This article was inspired by two questions I've received many times since Dreamweaver added the layers feature. The questions are, "How come I can center my design when I use tables in Dreamweaver, but I can't center layers?" and "How come when I combine tables and layers, the alignment of elements sometimes looks terrible?"

The answer is a little complicated, but let me start by explaining that when you design a Web page in Dreamweaver, you have many options for controlling the layout and the placement of images, text, and other elements on your pages, but two of the most popular options are tables and layers.

The page in Figure 1 was designed using layers in Dreamweaver to control layout.

Figure 1. Layers control this page's layout.

The page in Figure 2 was designed using a centered table to control layout.

Figure 2. A centered table controls this page's layout.

In the early days, tables were the only option, and tables are still very popular. When you design a page with a table, you essentially create a grid and use the cells of the table as containers for all of your text, images, and other elements. You can create complex designs by merging and splitting cells, and you can even nest a table inside a table cell to position elements. When you create a table, you have the added advantage that you can easily use the center alignment option to center the entire table, creating a page that stays centered on the screen, a design trick that makes it appear that your site is better using the real estate on a monitor, even when the site is viewed in different-sized browser windows.

A more recent option in Web design, and an increasingly popular one, is the layers feature. Layers in Dreamweaver are great because they're so easy to create and they offer the most precise design control possible on the Web. You'll find a tutorial on creating a design with layers in the September/October 2006 issue of Layers magazine (p. 64), but essentially, you just select the Layer icon in the Layout Insert bar, and then click-and-drag to create a layer anywhere on your page. Then you can insert images, text, or any other element into your layer, and you can move layers anywhere on a page by clicking-and-dragging the crosshairs at the top-left corner.

Unfortunately, you can't center your design with the layers feature because Dreamweaver creates layers by creating CSS p tags with absolute positioning. Absolute positioning is what makes it possible to precisely place layers where you want them on a page, but because you're specifying the location in relation to the top and left border of the page, you can't set it to automatically center within any browser window because the size of the browser window depends on the size of your viewers' monitors and their browser settings.

So it comes down to this: You can use the layers option to create a precise design, but you'll have to align everything from the left side of the page, so be prepared for it to stay there no matter how wide your user's browser window. Or, you can use tables (the slightly more complex, and some would argue soon to be obsolete, option), and you can center your design so that it floats within a browser window.

Centering a layout is popular on the Web because it enables you to position your design so that it better fills a screen, no matter how big that screen is. There are other ways to design Web sites, such as using floating p tags to create a centered design, but that option is a lot more complex to create in Dreamweaver unless you're quite advanced and adept at writing CSS (and that's way beyond the scope of this article).

Although many people still use tables, progressive Web designers are moving away from them because CSS offers some new advantages, such as more streamlined code and better accessibility. If you really want to create more advanced layouts, you'll eventually need to graduate from layers and use the CSS features in Dreamweaver, or write the CSS code yourself. But for now, tables and layers are both great options for Web design -- just be careful if you combine them.

Tables and Layers Don't Always Mix
Although you can use tables and layers in the same design, you should be aware that inserting layers into table cells can be problematic. The most common mistake is to create a table, center it on the page, and then insert layers into the table cells to easily position text and images.

The problem is that when your design is viewed in browser windows that are different sizes, the table adjusts to remain centered, but the layer stays in a fixed position. Figure 3 illustrates what can happen.

Figure 3. The page on the top looks fine. But when someone widens the browser window (bottom), not so good.

Notice that the design looks fine when the display area is limited to the width in the top image. The layer with the text (highlighted in yellow) fits nicely within the colored table cell.

But look what happens when the display area is widened. The centered table moves, but the fixed-position layer stays in the exact same place relative to the left side of the screen -- and that's clearly not where you'd want the layer with the text to display.

Unfortunately, you can't control the display area; visitors to your site will almost certainly use different sized monitors, and even if they all used the same sized monitors, some would choose to open their browser to completely fill the screen, while others would narrow the display area. So you have to design your pages to work in a variety of browser sizes and widths, and that means you have to be careful about combining centered tables and layers that use absolute positioning. The one exception is that you can insert a table into a layer.

In Figure 4, the row of thumbnail images at the bottom of the page was created by inserting a table into a layer and using the table to arrange the thumbnails equally across the width of the layer. You could have created the same design using a new layer for each thumbnail, but in this case, the table provided a quick, easy solution to spreading them out equally.

Figure 4. Layers for the thumbnail images at the bottom work well within this table-based Web page.

As the Web evolves and Dreamweaver develops even more powerful support for CSS, you should probably stop using tables completely. CSS really does offer many great advantages. But today, as we muddle through the evolutionary world of Web design, tables still provide an easy way to create a centered design, and layers provide an easy way to get design control of your layout. You can even combine these old and new technologies on your pages; just make sure your pages display well in a variety of different browser sizes, and you can publish your beautiful designs with the confidence that they'll look good to all your visitors.

Top