• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 4. Elements of Page Design > Creating a Table in Standard View

Creating a Table in Standard View

When you created the table in the previous exercise, Dreamweaver did the majority of the work for you. In layout view however, because Dreamweaver is doing the work, you lose a certain amount of control over how the table is defined. In standard view you must do that work yourself. The advantage of using standard view is more precise and specific control over how the tables are constructed. Additionally, some Dreamweaver features such as layers (covered in Lesson 15) do not function in layout view—you must use standard view.

Although layout view is an easy way to design your pages, you will often need to view your page in standard view, which shows you the HTML table structure. You can create tables yourself in this view or view the table Dreamweaver created when you drew a table in layout view.

If the information you want to present is structured in rows and columns, using a standard table is easier than drawing the rows and columns yourself. Often, you will have more control of your table in standard view.

1.
Open a new document. Save the file as lodging.html, title the page Lights of the Coast: Lights: Lighthouse Lodging, and make the document background color white. Insert the lodging_header.gif from the Lesson_04_Tables/Images folder at the top of the page.

The page you are creating is a part of the Lights section of the “Lights of the Coast” project site. The page title you have typed will indicate this to the visitors of the site.

You'll use this document in the following exercises to learn more about creating tables and working with their contents.

2.
Click Standard View in the Layout tab on the Insert bar.

When you create tables in standard view, you'll see the table borders and all the cells of the tables. The layout icons in the Insert bar should be grayed out.

TIP

You can also choose View > Table View > Standard View to switch to standard view. You can also switch to standard view from layout view by using the keyboard shortcut Shift+ Command+F6 (Macintosh) or Shift+Ctrl+F6 (Windows).

3.
Open the lodging_introduction.txt file from the Lesson_04_Tables/Text folder. Copy the text, and then paste it into your page in a new paragraph after the lodging header. Format the text as Verdana, –1.

Your table will follow this text.

4.
Place the insertion point in a new paragraph after the text and click the Common tab in the Insert bar. Then click the Insert Table button.

TIP

You can also use the Table button on the Tables tab of the Insert bar to insert a table.

The Insert Table dialog box opens.

The Insert Table dialog box contains these options:

  • Rows: The number of table rows. The Dreamweaver default is 3.

  • Columns: The number of columns. The Dreamweaver default is 3.

  • Width: The width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are better for precise layout of text and images. Tables specified in percentages are a good choice when the proportions of the columns are more important than their actual widths. The Dreamweaver default is 75 percent.

  • Border: The width of the table border. The Dreamweaver default is 1.

  • Cell Padding: The amount of spacing between the cell content and the cell walls. If you leave this option blank, cell padding defaults to 1 pixel. If you don't want cell padding, be sure to type 0 in the text field. The Dreamweaver default is blank.

  • Cell Spacing: The amount of spacing between table cells, not including the border. If you leave this option blank, cell spacing defaults to 1 pixel. If you don't want cell spacing, be sure to type 0 in the text field. The Dreamweaver default is blank.

TIP

You can choose Insert > Table to open the Insert Table dialog box. You can also use the keyboard shortcut Option+Command+T (Macintosh) or Ctrl+Alt+T (Windows) to open the Insert Table dialog box.

5.
Type 2 for Rows and 6 for Columns. Change the Width to 600 pixels, set the Border to 1, and leave the Cell Padding and Cell Spacing text fields blank. Then click OK to close the dialog box.

The table appears on your page with a gray border, showing the two rows and six columns.

6.
Type Name in the first cell of the first row, and then press Tab to move to the next cell. Type Location and press Tab. Type Price and press Tab. Type Phone and press Tab. Type Availability, press Tab, and type Lens.

You can use the Tab key or the arrow keys to move between cells. Tab is the quickest method to jump to the next cell to the right or down to the next leftmost cell if you are at the end of a row. If you move to a cell that already has content in it, that content is selected when you use Tab.

7.
Click after the table; then press Return (Macintosh) or Enter (Windows).

The insertion point is in a new paragraph. The columns of your table may shift slightly, changing their widths.

You could continue to enter the remaining text for the table. In the next exercise, however, you will use another method to fill the table.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint