*** From the Archives ***

This article is from October 6, 2006, and is no longer current.

Dreamweaver Design Challenge: Tables vs. Layers


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

  • anonymous says:

    Since I am using GoLive 6.0, I wonder how layers vs tables article relates GoLive? I know Adobe recently purchased Dreamweaver product line.

    ADUBIN

  • anonymous says:

    exist, are published, and have been available for quite some time now. To center a layer, or div, you use CSS. You use tables for data presentation. HTML is only part of building a website — any website built without it is the sign of a rank amateur.

  • anonymous says:

    If you are like me and have clients that wish to do simple edits to their site(s) – tables offer one huge advantage. The inexperienced client can much easier select text or an image in a table cell and replace the same. While this can be done with CCS based layout and / or Contribute or Co-Author, tables remain easiest and simplest. Occams razor.

  • anonymous says:

    Positioning with CSS is not easy, but with some work layered blocks can effectively be centered on the screen of all browsers. Using layers in table cells and resizing the screen doesn’t have to cause problems. Layers can easily flow withing a table cell by using realtive positioning.

  • anonymous says:

    I have tried over and over to use them and never get the result I like. I have been using tables since before there were WYSIWYG tools and I can always do exactly what I want. CSS is great for controlling fonts, text, colors, and keeping a site look consistant, as far as I am concerned. But layers just don’t do it for me and probably never will. And just because something is new and different and cool is not a reason to use it. Is it effective? Does it reduce the code size? Is it easy for someone else to understand your code? Can someone else edit it? Can it be used in a content management system? Many of our clients use CMS and if they can’t edit it, it is useless.

  • Anonymous says:

    This is the kind of article that i want i expect to find on internet!!!

    Regards,

  • Anonymous says:

    Actually you can center layers by using a css tag. basicly set left to 50% and then take half the width of the layer for example lets say it was 500px wide so you would se the left margine -250 and it will be centered :)

  • Anonymous says:

    Dear Sirs/Madams,
    This is a good article that I was waiting for. I would like to thank the author, for publishing it on the web.
    Best regards,
    Pulack Ghatack
    Dhaka, Bangladesh
    [email protected]

  • >