adding fonts

the assets window

cascading style sheets

find and replace

fixing images

forms

go back buttons

hotspots

inserting Flash text

inserting Flash buttons

the library

navigation bar

page properties

rollovers

site management

tables

Tables

Tables are used for two purposes-- (1) to actually format data and (2) as a layout and design tool

Here's some information to help you make the most of Dreamweaver's capabilities. It's taken from Dreamweaver's help menu.

inserting a table | setting table properties | splitting and merging cells | expanded table mode | adding and removing rows and columns | clearing widths and heights | autostretch

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Inserting a table and adding content

Use the Insert bar or the Insert menu to create a new table. Then, add text and images to table cells the same way that you add text and images outside of a table..

To insert a table:

1. In the Design view of the Document window, place the insertion point where you want the table to appear.

   Note: If your document is blank, then the only place you can place the insertion point is at the beginning of the document.

2. Do one of the following:
   • Select Insert > Table.
   • In the Common category of the Insert bar, click the Table button.

   The Insert Table dialog box appears. Complete the dialogue box and click OK.

The table appears in the document.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Setting table properties

This Property inspector allows you to set properties for tables.

To set table properties:

1. Set any of the following options:

   Table Id is an ID for the table.

   Rows and Cols are the number of rows and columns in the table.

   W and H are the width and height of the table in pixels, or as a percentage of the browser window’s width.

   Note: You usually don’t need to set the height of a table.

   CellPad is the number of pixels between a cell’s content and the cell boundaries.

   CellSpace is the number of pixels between adjacent table cells.

   Tip: If you don’t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

   Align determines where the table appears, relative to other elements in the same paragraph, such as text or images.

   Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with text appearing above and/or below the table). Default indicates that the browser should use its default alignment.

   Tip: When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content, use Left or Right alignment.

   Border specifies the width, in pixels, of the table’s borders.

   Tip: If you don’t explicitly assign a value for the border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, select View > Visual Aids > Table Borders.

   Clear Column Widths and Clear Row Heights buttons delete all explicitly specified row height or column width values from the table.

   Convert Table Widths to Pixels and Convert Table Heights to Pixels buttons set the width or height of each column in the table to its current width in pixels (also sets the width of the whole table to its current width in pixels).

   Convert Table Widths to Percent and Convert Table Heights to Percent buttons set the width or height of each column in the table to its current width expressed as a percentage of the Document window’s width (also sets the width of the whole table to its current width as a percentage of the Document window’s width).

   Bg Color is the table’s background color.

   Brdr Color is the color for the table’s borders.

   Bg Image is the table’s background image.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Splitting and merging cells

Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. For more information, see About splitting and merging table cells.

As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and decreasing the number of rows or columns spanned by a cell.

To merge two or more cells in a table:

1. Select the cells in a contiguous line and in the shape of a rectangle.
   
2. Do one of the following:
   • Select Modify > Table > Merge Cells.
   • In the expanded Property inspector (Window > Properties), click the Merge Cells button.
     

     Note: If you don’t see the button, click the arrow in the lower right corner of the Property inspector so that you see all the options.

   The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

To split a cell:

1. Click in the cell.
2. Do one of the following:
   • Select Modify > Table > Split Cell.
   • In the expanded Property inspector (Window > Properties), click the Split Cell button.
     
     
     

     Note: If you don’t see the button, click the arrow in the lower right corner of the Property inspector so that you see all the options.

3. In the Split Cell dialog box, specify how to split the cell.

   For more information, see Setting the Split Cell dialog box options.

To increase or decrease the number of rows or columns spanned by a cell:

1. Select a cell.
2. Do one of the following:
   • Select Modify > Table > Increase Row Span or Modify > Table > Increase Column Span.
   • Select Modify > Table > Decrease Row Span or Modify > Table > Decrease Column Span.

Using Expanded Tables mode

Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point.

For example, you might expand a table to place the insertion point to the left or right of an image, without inadvertently selecting the image or table cell.

Note: Once you make your selection or place the insertion point, you should return to the Standard mode of Design view to make your edits. Some visual operations, such as resizing, will not give expected results in Expanded Tables mode.

To switch into Expanded Tables mode:

1. If you are working in Code view, select View > Design or View > Code and Design.

   You cannot switch to Expanded Tables mode in Code view.

2. Do one of the following:
   • Select View > Table Mode > Expanded Tables Mode.
   • In the Layout category of the Insert bar, click the Expanded Tables Mode button.

A bar labeled Expanded Tables Mode appears across the top of the Document window. Dreamweaver adds cell padding and spacing to all tables on the page and increases the tables’ borders.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adding and removing rows and columns

To add and remove rows and columns, use the Modify > Table or column header menu.

Tip: Pressing Tab in the last cell of a table automatically adds another row to the table.

To add a single row or column:

1. Click in a cell.
2. Do one of the following:
   • Select Modify > Table > Insert Row or Modify > Table > Insert Column..
   • Click the column header menu, then select Insert Column Left or Insert Column Right.
     

To add multiple rows or columns:

1. Click in a cell.
2. Select Modify > Table > Insert Rows or Columns.The Insert Rows or Columns dialog box appears.
3. Select Rows or Columns, then complete the dialogue box.
4. Click OK. The rows or columns appear in the table.

To delete a row or column, do one of the following:

• Click in a cell within the row or column you want to delete, then select Modify > Table > Delete Row or Modify > Table > Delete Column.
• Select a complete row or column (see Selecting rows or columns), then select Edit > Clear or press the Delete key.

The entire row or column disappears from the table.

To add or delete rows or columns using the Property inspector:

1. Select the table (see Selecting a table).
2. In the Property inspector (Windows > Properties), do one of the following:
   • Increase or decrease the Rows value to add or delete rows. Dreamweaver adds and removes rows at the bottom of the table.
   • Increase or decrease the Cols value to add or delete columns. Dreamweaver adds and removes columns at the right side of the table.

   Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.

 

 

 

 

 

 

 

 

 

Clearing set widths and heights

You might want to clear set widths and heights before you resize a table, or if you have trouble resizing a table or individual columns or rows and want to start over.

Note: When you resize a table by dragging one of its selection handles, you change the visual size of the cells in the table, but you do not change any specified widths or heights of cells. It’s a good idea to clear set widths and heights before resizing.

To clear all set widths or heights in a table:

1. Select the table .
2. Do one of the following:
   • Select Modify > Table > Clear Cell Widths or Modify > Table > Clear Cell Heights.
   • In the Property inspector (Window > Properties), click the Clear Row Heights button or the Clear Column Widths button.
   • Click the table header menu, then select Clear All Heights or Clear All Widths.

To clear a column’s set width:

1. Click in the column.
2. Click the column header menu, then select Clear Column Width.

 

 

 

 

 

 

 

 

 

 

 

 

Making a column autostretch or fixed-width

A column in a table can be either fixed-width or autostretch. For more information, see Fixed column width and autostretch columns.

Making a column autostretch before your layout is complete might have unexpected effects on table layout. To prevent columns from growing unexpectedly 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.)

To make a column autostretch:

1. Do one of the following:
   • Click the column header menu, then select Make Column Autostretch.
     
   • Select a cell in the column by clicking an edge of the cell, then click Autostretch in the Property inspector.

   Note: You can make only one column in a given table autostretch.

   If you have not set a spacer image for this site, the Choose Spacer Image dialog box appears.

2. If the Choose Spacer Image dialog box appears, select an option, then 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.

To set a column to a fixed width, do one of the following:

• Click the column header menu, 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 click 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 automatically sets the width to match the width of the content.

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