Information Resources & Technology (IRT)–

Add and Edit Tables

Note: Images, tables, text and combinations of all 3, should fit within the horizontal space available in each column. Wide images, wide tables, and longcontinuoustextwithnobreaks, can cause the central content to be pushed out into the background area.

Here are the maximum widths for each column size:

Watch Demo

Step 1: add a chart table

  1. In your browser, find the page where you want to place the table; if you completed the tutorials for New Topic through Working With Left Navigation, use use a page from your My Project topic, such as Stationery
  2. In Dreamweaver, find and open the /my_project/2col_stationery.html file
  3. Create a new paragraph line for the table in the middle of your text and put your cursor on that line
  4. Click the Insert Table button
  5. The resulting dialog box will allow you to set various properties of the table you are inserting. Use these settings:
    • Rows: 3
    • Columns: 3
    • Table width: 500 pixels
    • Border: 1
    • Padding: 5
    • Spacing: 0
    • Header: Top
  6. Click OK to insert the table.
    Note also the square handles for stretching the table's size. Try to avoid changing the table sizes using these handles. Tables sized using handles can create problems later.
  7. Try filling some text into the table's cells
  8. Save, Put and reload the page in your browser
  9. Note how text in the header row differs from text in other cells
  10. Note the ugly, old-style table border
Watch Demo

Step 2: Change table properties and cell settings

  1. Back in Dreamweaver, select the table
    • Click and drag across table until handles show, OR
    • Put cursor in table, then use menu sequence Modify > Table > Select Table
  2. Modify the following properties in the Properties Inspector
    • Alignment: Center
    • Border: 0
    • Cell padding: 5
    • Cell spacing: 2
    • Border color is not used in every browser, and we've set the border to 0 anyway, so skip over it
  3. Click and hold the "Bg color" button in the Properties Inspector; use the color picker to select a color; you can click any item on your screen to sample it's color; for this exercise, click the first gray chip above the white chip
  4. Carefully select all the cells of the table
    • Selection rules show within cells when selected
    • Click and drag from one corner to the other
    • You can also use the Tag selector to select individual cells
  5. Click and hold the "Bg" button in the Properties Inspector; use the color picker to select the white color chip
  6. The table is starting to look a little more sophisticated. The HTML border we started with looked clunky. In our improved version, the color of the table, gray, shows through between the cells which are filled with a white background.
Watch Demo

Step 3: Edit columns, rows and cells

  1. Select a pair of cells, say the bottom left two; look for Properties Inspector button for "Merge selected..." (looks like two boxes with a dotted line between) and click it; the cells are merged
  2. Place your cursor in any other cell; look for Properties Inspector button for "Splits cell..." (looks like a sideways H) and click it
  3. Choose Rows or Columns in the Split Cell dialog box and click OK
  4. The cell is subdivided
    • In this way, very complex information layouts can be composed
  5. Explore on your own: Right-click (win)/Ctrl-click (mac) with your cursor within the table and explore the popup menu's Table submenu

Step 4: Style cell text

  1. Select any table cell containing text and look for the Tag Selector at the bottom of the document window
  2. Right-click (win)/Ctrl-click (mac) on the <td> tag and look for the "Set Class" item in the popup menu
  3. Select "text_bodysmall" from the list of styles
  4. Note how text appearance changes; note also how the Tag Selector item has changed
  5. Select a range of cells by clicking and holding in one and dragging across others
  6. Right-click (win)/Ctrl-click (mac) on the <td> tag and look for the "Set Class" item in the popup menu
  7. Select "text_bodysmall" from the list of styles
  8. While the cells are still selected, find the Horz pull down in the Properties Inspector and change it to "Left"

Step 5: Finish up

  1. Use the File menu > Save command
  2. Use the Site menu > Put command
  3. Switch to a browser, view and/or reload the home page to see your table

table, expandedA neat trick

Tables are a major element in the layouts of many Web sites. By combining text, graphics, and colors, many different designs can be achieved. Sometimes a table is complex, or it's elements so small that it's hard to select them. To make it easier to analyze the table, make selections, and make changes, set the Table's Cell Padding to 5 or 10 in the Format > Table Properties > Table tab. When you are done, set the padding back to 0 or whatever it was before.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: