Laying Out Your Pages: Working with Tables and Divs (Layers)

• Getting Started
• Site Management and Templates
• Hyperlinks
• Links and Anchors
• Cascading Style Sheets
• Publishing
• More Resources
• Tables and Divs
• Frame Layouts
• Image Maps
• User-Input Forms
• Spry Widgets
• Pop-Up Menus
• Behaviors
• Images
• Media Elements
• Rollovers
• Video & Multimedia

Many web designers use tables or CSS layers to help them lay out their pages. Tables continue to be the simplest and most common layout tool in basic HTML pages, and they allow you to align text and images next to each other by placing each item into a separate “cell,” which, like in a spreadsheet, is the junction point between a row and a column. Tables in Dreamweaver work similarly to tables in other programs, like Microsoft Word.

CSS Layers (or AP Div elements, as Adobe Dreamweaver CS3 calls them) are becoming very common on web pages today, however, as they offer more freedom and flexiblity to place elements on the page anywhere the designer wishes. They can also be controlled from a central file or from one central place within the document - a CSS stylesheet - rather than having individual controls for each element throughout the page. So, if the central column in a layout is always supposed to be blue, and 50% of the page width, with an indent of 120 pixels, then all of this can be defined for that column in one place, along with the definitions for the rest of the layout elements and other things that are part of the page (text, images, and so forth).

Standard Tables

1. Place your cursor in the document at the point where you want a table to appear, then click the Insert menu and choose Table.

2. You will be presented with a window like the one below, where you may choose how many rows and columns you would like to have, what sort of spacing/padding you would like between your cells, how large your table will be on the page, and how wide the border should be.

3. Our example gives us a 2x2 table with 5 points of padding (space around cell borders) and 1 point of spacing (space between table cells) that would dynamically stretch to fit 100% of the page’s width at all times. Using percentages instead of pixels for your table width allows the table to expand and contract depending on the size of the viewer’s screen — a great benefit for those with small monitors.

This table also has no border lines when viewed in a web browser. While working in Dreamweaver, tables with a Border of 0 will be indicated by dashed lines, as shown below. Setting the Border size to 1 will bring back the lines.

It is highly recommended that you experiment with tables as design and layout tools that can increase the visual quality of your pages.

Using Alternate Table Modes

You can also use Dreamweaver's Layout and Expanded Table Modes to draw your own table cells in any configuration that you like. Explore each of the table modes to find one that works best for you. Sometimes one mode will fit your design needs better than another in a given situation, so it is useful to be familiar with all three modes.

1. To enter Layout mode, click the View menu, drag to Table Mode, and choose Layout. You'll then have the option to draw your table area and create cells within that table.

2. After entering Layout mode, you must first click the Insert menu, drag to Layout Objects, and choose Layout Table to place a table area on your page. Drag and drop through an empty place in your page to create the table.

3. Once you have a layout table in place, you can go back the Insert menu, drag to Layout Objects, and choose Layout Cell to create cells one at a time. Drag and drop within your table area to create a cell.

4. Alternately, Expanded Tables Mode allows you to resize drawn cells on the fly by dragging cell lines around. To enter Expanded Table Mode select the View menu, drag down to Table Mode, and click Expanded Tables Mode. A bar labeled Expanded Tables Mode appears across the top of the Document window.

5. Dreamweaver adds cell padding and spacing to all tables on the page and increases the tables' borders. Now you can drag the borders around at will to increase the size and span of the table rows, columns, or the entire table, at will.

CSS Layers (AP Div)

Dreamweaver can use layers to draw individuals cells in any configuration you wish on a page. Layers, or AP Div tags as they are referred to in version CS3, differ from the Layout Table mode in that they allow you to put CSS-controlled cells anywhere on the page, without need for any specified table area. You can place layers in front of and behind each other, hide some layers while showing others, and move layers across the screen. You can place a background image in one layer, then place a second layer, containing text with a transparent background, in front of that.

1. To insert a layer, click the Insert menu, drag to Layout Objects, and choose Layer (or AP Div). Drag and drop anywhere on your page to create the layer.

2. When using Layers, be sure to modify the Properties as necessary to manage overflow (when things inside of layers get too large and start infringing on other layers).

3. You can manage your layers using the Layers window (all versions of Dreamweaver prior to CS3) or the AP Elements Window (Dreamweaver CS3 only). Click the Window menu and choose Layers or AP Elements to bring it up. Here you can arrange layer orders and prevent layer overlaps.

4. You can also manipulate layer/AP Div look and feel in the CSS Styles window to set positioning, colors, margins, and other details of the layer. For more information of CSS styles in general, see the CSS section of this tutorial. Also, note that Adobe CS3 and above also hosts a wealth of excellent starter pages built in CSS DIV containers, found when you create a New page from the File menu. You can use the CSS Styles window to alter the colors and features of each container.

Layers/AP Divs provide a great deal of flexibility in placing content. However, site visitors with older web browsers might have trouble viewing your layers. To ensure that everyone can view your web page, you can design your page layout using layers, and then convert the layers to tables by clicking the Modify menu, dragging to Convert, and clicking Layers/AP Divs to Table. Select the options you need and click OK. Alternately, you can convert normal tables to layers, if you prefer, in the same manner.

For an example of a page created using CSS Layers instead of tables, click here.