This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Getting Started with Tables

This document explains how to create tables, add text and images to tables, and select a table or table parts in a Dreamweaver document.

return to topCreating Tables

Tables are composed of horizontal rows and vertical columns. When creating tables, you have the option of using the Insert menu or the Table buttonTable buttonlocated on the Insert bar in the Common tab.

Creating Tables

  1. Place your insertion point where the table should appear

  2. From the Insert menu, select Table
    OR
    From the Insert bar, in the Common tab, click TABLETable button
    The Table dialog box appears.
    Table dialog Box

  3. In the Rows text box, type the desired number of rows

  4. In the Columns text box, type the desired number of columns

  5. OPTIONAL: To alter the width of the table,
    1. In the Table width text box, type the desired size
    2. From the Table width pull-down list, select the unit of measurement
      NOTES:

      The Percent option specifies a percent of the screen the table will take up. Your control over the size is relative because the table will adjust to fit the size of the user's browser.
      The Pixels option specifies the exact size of the table, giving you more direct control.

  6. OPTIONAL:To add a border around the cells of the table, in the Border thickness text box, type a number
    HINT: For no border, type 0 (zero).

  7. OPTIONAL: To adjust the cell padding and cell spacing, in the Cell padding and Cell spacing text boxes, type the desired numbers
    NOTE: Cell spacing is the space between adjacent cells. Cell padding is the amount of blank space surrounding text or images in a cell. Adjusting either of these options affects the entire table proportionally.

  8. Click OK
    A blank table appears.

Adding the Table ID

To increase the accessibility of your web page, it is recommended that you add a table ID. The table ID is similar to the alternate text of an image; it identifies the object to devices that read web page content.

  1. Select the entire table

  2. In the Table Properties pane, in the Table Id text box, type appropriate text by which to identify your table
    Table ID

  3. Press [Enter]

return to topAdding and Formatting Table Text

Text is added to a table by typing directly in the table's cells. Once text has been added to a table, it is formatted just as any other text in a document would be.

Adding Table Text

  1. With the insertion point in the desired cell, type the appropriate text
    HINT: To move between table cells, press [Tab]

  2. Repeat as necessary

Aligning Text within a Cell

You can align text horizontally or vertically within a cell. The horizontal alignment options are left, right, center, and default, which is the alignment of the text when the cell was created. The vertical alignment options are default, top, bottom, middle, and baseline.
HINT: Baseline aligns all the text in the row along the imaginary line at the bottoms of the letters.

  1. Place the insertion point in the desired cell

  2. From the Horz pull-down list, select the desired option

  3. To adjust the vertical alignment, from the Vert pull-down list, select the desired option

return to topInserting Images

Images are inserted into tables just as they are inserted anywhere else in a web page. For more information about images refer to Working with Images.

return to topSelecting a Table or Table Parts

A table or parts of a table can be selected so that you can edit or delete certain cells, rows, or columns within a table.

Selecting a Cell

  1. [Ctrl] + click in the desired cell
    The cell is selected.

Selecting a Row

  1. Move the insertion point to the left of the row
    A dark arrow appears.

  2. Click once
    The row is selected.

  3. OPTIONAL: To select multiple rows, drag the arrow past the rows you wish to select

Selecting a Column

  1. Move the mouse to the top of the column
    A dark arrow appears.

  2. Click once
    The column is selected

  3. OPTIONAL: To select multiple columns, drag the arrow past the columns you wish to select

Selecting an Entire Table: Quick Menu Option

  1. Right click within the table » select Table » Select Table

Selecting an Entire Table: Mouse Option

  1. Place the pointer over any border of the table
    The pointer becomes a 2 headed arrow with two vertical or horizontal lines (depending on which border you have your insertion point over) between the arrows.

  2. Click the border
    The entire table is selected.

Excellence. Our Measure. Our Motto. Our Goal.