Tables Tutorial

In this tutorial, you’ll create a menu for the café site you’ve been working on. In addition, you’ll use some Cascading Style Sheet magic to make the table look great (skip ahead to Figure 6-27 to see the finished page).


You need to download files from to complete this tutorial. See the Note on Note for more details.

Once you download the tutorial files and open Dreamweaver, set up a new site as described on Setting Up a Site: Name the site Tables Tutorial, and select the Chapter06 folder (inside the MM_DWCS6 folder). (In a nutshell: choose Site→New Site. In the Site Setup window, type Tables Tutorial into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter06 folder, and then click Choose or Select. Finally, click OK.)

Adding a Table

Once again, you’ll be working on a page for the good people who run Cafe Soylent Green.

  1. Choose File→Open.

    You’ll work on a page similar to the ones you’ve built so far.

  2. Navigate to the Chapter06 folder and double-click the file named menu.html. Click in the empty space beneath the headline “Cafe Soylent Green Menu.”

    You’ll insert a table into this space.

  3. Choose Insert→Table.

    You can also click the Table button in the Insert panel’s Common category. Either way, the Table window appears (see Figure 6-16). You need to define the table’s basic characteristics.

    Inserting a table into a web page is a matter of making a few choices in the Table dialog box. Any text you type into the Summary box doesn’t appear in a browser window, so you probably won’t use this option much. It’s intended to explain a particularly complicated table to non-visual web browsers (like search engines such as Google and Bing, or screen readers used by the visually impaired).

    Figure 6-16. Inserting ...

Get Dreamweaver CS6: The Missing Manual now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.