Saint Mary's College - Notre Dame, Indiana

Instructional Technology Resource Center - Saint Mary's College - Notre Dame, Indiana
 
 

Creating A Table:

Tables are an integral part of most Web pages, and they are easy to create with Dreamweaver. They are especially useful when you want to arrange images or text side by side on a page, or to create columns like those in a newspaper or magazine, and you can create a wide range of designs for controlling the positioning of images on a page.
  • Click to place the cursor where you want the table to appear on your page.
  • Click the Insert Table button on the Objects palette. The Insert Table dialog box appears. Enter the number of rows and columns that you want. Set your preferences for formatting, white space, and table and cell size.
  • Set the Table Width to 75%. If you choose a percentage, the table will adjust to your viewer's window size. This works well if you want your table to fill a certain percentage of the screen, no matter the size of your viewer's browser window or monitor. If you want better design control, however, you'll want to use a fixed-width table to ensure that the elements you arrange in the table cells do not shift around when the table adjusts. You can change these options later in the Property Inspector. If you want to insert a table without having to first specify these options, turn off the Show Dialog When Inserting Objects option in the General Preferences.
  • Click to place your cursor in any cell of the table and enter text and use the Property Inspector to format the text just as you would any other text on a page. You can also insert images, multimedia files, and even other tables in any table cell.
  • Press the Tab key to move to the next cell. etc
  • Click anywhere on the outside border of the table (tip: if you have difficult selecting the border of the table, click in side the table, and then select the entire table by clicking on "<table>" on the left side of the status bar. Simply click on to select it and reveal the table options (attributes) in the Property Inspector. You can use the Property Inspector to change a table's attributes.

row and columns: can be modified to change the number of rows and columns

W and H (i.e. Table Width and Height):
In the W and H fields, specify the width and height of the table as a number of pixels or as a percentage of the browser window. You usually don't need to set the height of a table.
Align:
Use the Align field to specify how a table aligns with other elements in the same paragraph, such as text or images. Left aligns the table to the left of other elements, right aligns the table to the right of other elements, and Center centers the table. You can left-align, right-align, or center the table relative to the other elements. You can also choose the browser's default alignment.
V Space, and H Space:
In the V Space and H Space fields, specify the number of pixels of white space to leave above, below, and on both sides of the table.
Clear Row Heights and Clear Column Widths:
In the lower left are four icons; the top two Clear Row Heights and Clear Column Widths buttons to delete all table row height and column width values from the table. Immediately under these two icons is an icon to Convert Table Widths to Pixels button to convert the table width from a percentage of the browser window to its current width in pixels, and the reverse.
Cell Pad: (defaults to 1)
specifies the number of pixels between the cell content and the cell boundary (or wall).
CellSpace: (defaults to 2)
specifies the number of pixels between each table cell.
Table Border:
In the Border field, specify the width of the table border in pixels. If you are using the table for page layout, and want the table to provide an invisible layout grid, specify a border value of 0. To view cell and table boundaries when the border is set to 0, choose View > Table Borders
Lt Border and Drk Border:
Use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.)
Brdr and Bg:
Use the Brdr field to select a border color for the entire table. Use the Bg options to select the background image or background color for the table.

Adding rows and columns:

Use the commands in the Modify > Table submenu or the commands in the context menu to add and remove rows and columns from a table. Click in a cell where you want the new row or column to appear. Do one of the following:

  • To add a row, choose Modify > Table > Insert Row, or choose Table > Insert Row from the context menu.
  • To add a column, choose Modify > Table > Insert Column, or choose Table > Insert Column from the context menu.

Deleting Rows or Columns:

To delete a row or column: Click in a cell within the row or column you want to delete.

  • Choose one of the following options: To delete a row, choose Modify > Table > Delete Row, or choose Table > Delete Row from the context menu.
  • To delete a column, choose Modify > Table > Delete Column, or choose Table > Delete Column from the context menu.

If needed consult the Dreamweaver Help, or Advanced Table Tutorial.