Dreamweaver

Set column width

You can set a column to a specific width or make it stretch to fill as much of a browser window as possible (autostretch). You can also specify a minimum width for a column using a spacer image.

The first time you insert a spacer image, you set up a spacer image for the site. You can set preferences for spacer images.

Making a column autostretch before your layout is complete might have unexpected effects on table layout. To prevent columns from growing wider or narrower, create your complete layout before making a column autostretch, and use spacer images when making a column autostretch. (However, if each column contains other content that will keep the column at the desired width, you don’t need spacer images.)

If you see two numbers for a column’s width, then the column width set in the HTML code does not match the column’s apparent width on the screen. You can make the width specified in the code match the visual width.

Note: You need to be in Layout mode to use these options. Also note that sometimes the column menu is at the bottom edge of the columns.

Make a column autostretch

  1. Do one of the following:

    • Click the column header menu and select Make Column Autostretch.

      Select Make Column Autostrretch from the column header menu.

    • Select a cell in the column by clicking an edge of the cell, and select Autostretch in the Property inspector.

      Note: You can make only one column in a given table autostretch.
  2. (Optional) If you have not set a spacer image for this site, the Choose Spacer Image dialog box appears and you can set which image to use, and click OK.

    A wavy line appears at the top or bottom of the autostretch column. Double bars appear at the tops or bottoms of columns that contain spacer images.

Set a column to a fixed width

 Do one of the following:

  • Click the column header menu, and then select Make Column Fixed Width. Make Column Fixed Width specifies a width for the column (in the code) that matches the current visual width of the column.

  • Select a cell in the column by clicking an edge of the cell, then select Fixed and type a numeric value in the Property inspector. If you enter a numeric value that is less than the width of the column’s content, Dreamweaver sets the width to match the width of the content.

    The width of the column appears at the top or bottom of the column.

Insert a spacer image into a column

If you’re making a column autostretch, you can choose whether to use a spacer image, and which spacer image to use. The image is not visible, but the column might shift slightly and a double bar appears at the top or bottom of the column to indicate that it contains a spacer image.

  1. Click the column header menu, then select Add Spacer Image.
    Select Add Spacer Image from the column header menu.

  2. If you have not set a spacer image for this site, in the Choose Spacer Image dialog box, select the image to use and click OK.
    Create A Spacer Image File
    Creates a GIF image to use as a spacer image, and allows you to select a folder in which to store the spacer image file, such as your site’s images folder. This is the recommended option, unless you’ve already created a spacer image file for your site.

    Use An Existing Spacer Image File
    Allows you to specify an existing spacer image file to use in autostretch tables. The spacer image should be a single-pixel transparent GIF.

    Don’t Use Spacer Images For Autostretch Tables
    Specifies that Dreamweaver should refrain from automatically adding spacer images to tables. (This option does not appear if you’re inserting a spacer image without making a column autostretch.) If you select this option, fixed-width columns in your layout might collapse to a small width, or even to zero width; spacer images help maintain the structure of your layout as you originally drew it. Use this option only if you’ve already placed enough content in your fixed-width columns to prevent them from collapsing, or if you have already added spacer images manually.

Remove a spacer image from a single column

 Click the column header menu and select Remove Spacer Image.
Note: The column might shift when the spacer image is removed.

Remove all spacer images from a table

 Do one of the following:

  • Click the table header menu and select Remove All Spacer Images.

  • Select the table and click Remove All Spacers in the Property inspector (Window > Properties) .

Note: The layout of your table might shift. If there is no content in some columns, the columns might disappear completely from the Design view.

Make widths consistent

 Do one of the following:

  • Click the table header menu and select Make All Widths Consistent.

    To make the column widths consistent, select the table first, and then click the table header menu to choose the command.

  • Select the table and click Remove All Spacers in the Property inspector (Window > Properties) .

    Dreamweaver resets the width specified in the code to match the visual width.