Using Macromedia

Dreamweaver 4

Tables

Tables are ways of laying out content in rows and columns on the page. They can have visible or invisible borders, special backgrounds, etc.

To insert a table in Dreamweaver, click on the Table button [table button] in the Objects men, or choose Table from the Insert menu. In the Table Properties window that comes up,[insert table window]

set the initial properties of the table (table properties can be edited later using the properties window):

  1. number of rows (horizontal divisions)
  2. number of columns (vertical divisions)
  3. width of the table-- select either percent of the screen or pixels as units of width
    Delete the Width number to have the table shrink to fit the content
  4. cell padding in pixels(empty space between the edge of the cell and the contents- can be left blank)
  5. cell spacing in pixels (space between the edges of cells- can be left blank)
  6. size of the border in pixels (0 for no border).

Click OK to display the new table.

You will now have a table to edit. Type, insert or paste your contents in the cells of the tables.
To: Do: 
Insert new rows or columns

Click at the bottom of the cell you want to insert the row or column after (or at the top to insert it in front. ) Choose 'Table' from the Modify menu, then choose 'Insert Rows or Columns'. [insert row/column window]

Select either Rows or Columns, set the number of Rows or Columns to insert, and select whether to insert them Above or Below the cell you're in. Click OK and they will be inserted.

Delete a row or column Click in a cell of the row or column you want to delete. Choose Table from the Modify menu, then choose Delete Row or Delete Column
Change the properties of a cell Click in the cell and set the properties using the Properties window. 
Stretch a cell across multiple rows or columns 

 

Click in the cell.
Choose Table from the Modify menu,
then choose Increase Row Span, or Increase Column Span.

 
'Split' a cell so that there are either two horizontal cells or two vertical cells where there was one.  Click in the cell. Choose Table from the Modify menu, then choose Split Cell.[split cell window]
In the pop-up window, choose whether to split it into rows or columns, and how many rows or columns to split it into.
(Actually adds a new cell/row and increases the column or rowspan of the other cells)

Setting Cell Properties

Cells are the smallest unit of a table, the intersection of row and column. To see and edit table cell properties, you will need to open the properties panel to its fullest extent by clicking on the more button (down arrow) in the lower right corner: [more properties button]

  1. Horz: sets the horizontal alignment of the content of the cell-- Left, Right, Center, or default (usually left)
  2. Vert: sets the vertical alignment of the content-- Top, Middle, Bottom, Baseline or Default (usually middle)
  3. W: sets the width of the cell, in pixels or percent of the table. Percentages are usually safer. The real width of all the cells in the column will be the width of the widest cell in the column, however.
  4. Bg: the background color for the cell. You can click on the color box and select a color from the palette, or use the RGB color number.
  5. Brdr: the color of the border around the cell, if there is one. Will not display on many systems.
  6. Bg: the background graphic, if any, you want to use for the cell. Click on the folder icon to find and select a graphic on your machine to use.

Setting Properties across a column or row

If you select all the cells in a row or column, you can set properties for that row or column. To do this, click and drag across all the cells so that each cell is highlighted with a dark line:

Row Selected:[row selected] Column Selected:

Then set properties as above.

Table Properties

To set properties for the whole table, you will have to select it. To do that, either choose Table from the Modify menu and choose Select Table, or right-click on the table and choose Select Table. In the properties panel, the table properties will be displayed:

  1. Rows determines the number of rows in the table
  2. Cols determines the number of columns
  3. W determines the width of the table itself, either in pixels or in percentage of the screen width (percentage scales better)
  4. Cell Pad is the cell padding (used mostly with bordered tables)
  5. Cell Space is the cell spacing (used mostly in tables with no border)
  6. Border is the width of the border. To get an unbordered table, set this to 0.
  7. Bg Color is the background color of the table. If a color is set for a particular row, column, or cell, that color will override the table color
  8. Bg Image is the background image of the table, if you want one. Use the folder icon to find an set a background image. This will tile to fill the entire table.

Removing a Table

To delete a table, select it as above, and click the delete key.


Back to Lists
Back to Table of Contents
Forward to Frames

Jennifer Heise, Last updated March 29, 2001