TABLES IN DREAMWEAVER

Using tables to create a layout in Dreamweaver is not only a good idea, it’s very easy! Click on the table icon in the common insert bar, and specify the number of rows and columns you want. It’s often a good idea to specify enough columns so that every other one is a “gutter” separating columns that contain content. For instance, if you want a 3 column table, specify a 5 column table and use columns 2 and 4 as spacers.

Specify a border thickness if you want a border. You can assign border color(s) using the properties panel, or by creating a CSS style (use the “border” panel).

Cellpadding refers to the distance cell contents will be bounced into the cell (rather than jamming up to the cell edges). If you don’t put a “0” here, most browsers will automatically insert 2 pixels

Cellspacing refers to the space between cells; this is similar to the “gutter” space InDesign uses when creating columns within a text box. If you don’t put a “0” here, most browsers will automatically insert 2 pixels

If you want a header—a first row and/or column with special formatting, select the style from the Header section. This is useful if you’re creating a chart of some sort.

The accessibility portion of this panel allows you to type a description that will be read out loud for people with visual impairments.

Once you have a table in your document, you can make adjustments to it within the design portion of the document window, by using the properties panel, and/or creating CSS styles.

To resize a table, select it by clicking outside the table and then clicking and dragging your cursor across it. You can tell it’s selected by the visible control points.

If you have trouble selecting a table, click within a cell, and then click on the word <table> at the bottom of your document window - nice shortcut!

You can adjust a table’s size by clicking and dragging any of the three control points. You can also change the table’s size by selecting it and changing it’s dimensions using the Properties panel.

You can move between cells in a table using the Tab key or your arrow keys. Or just click in the cell you want to work in.

Select multiple cells by holding the command key and clicking in the ones you want to select.

Merging cells is a great way to create the blocks in a grid for positioning elements. Select the cells you want to merge (they have to be adjacent to one another) by holding the Command key and clicking in each one.

Use the properties panel or the Modify > table menu to merge them into one cell. (Dreamweaver inserts the “collspan” or “rowspan” HTML to make it happen.)

The alignment properties you can adjust include the position of the table on the page (left, centered, right), and how the content of the cells aligns (top, middle bottom, and left, centered, right).

If you want text to wrap around the right or left side of a table, make sure to create a CSS style that defines a margin around it so things don’t collide (use the “box” panel).

The Modify > table menu has a variety of ways to adjust a table. If you want to insert a row or column in a specific place, rather than to the right or bottom of the existing table, place your cursor in the row or column to the right or below the new one you want to add. The new row or column will include any properties (like background color) that exist in the one to the right or below the one you’re adding.

CREATING STABLE TABLES

Tables dimensions are defined as either a percentage, that flexes with the size of the browser window, or fixed by using pixels as the measurement system. Tables created using a percentage are not only flexible in terms of how the browser displays them, but also in terms of what you can do with them.

One of the best ways to keep a column in a flexible (percentage-based) table from collapsing too much is to create a control row using a spacer gif. Create a blank document in Photoshop or Fireworks that’s about 5 pixels X 5 pixels and save it as a gif. Add a new row to the bottom of your table and insert the gif file in that row, in the column(s) you want to control.

Use the properties panel to change the width of the gif to the minimum width desired for that column.

This works not only for columns that will contain data, but for columns you’ve created as “gutters” or spacers between other columns.

You can also control the height of rows using this technique, as well as paragraph indents (although creating a style with CSS and specifying a first line indent in the “block” pane is smarter).

TABLE PROPERTIES