Dreamweaver CS5: The Missing Manual

Tables Tutorial

In this tutorial, you’ll create a data table containing product information. In addition, you’ll use some Cascading Style Sheet magic to make the table look great (see Figure 7-25).

Note

You’ll need to download files from www.sawmac.com/dwCS5/ 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, and select the Chapter07 folder (inside the MM_DWCS5 folder). (In a nutshell: choose Site→New Site. In the Site Setup window, type Tables into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter07 folder, and then click Choose or Select. Finally, click OK.)

Adding a Table and Data

Once again, you’ll be working on a page for the good people who run Chia Vet.

1. Choose File→Open.

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

2. Navigate to the Chapter07 folder and double-click the file named recommend.html. Click in the empty space, below the orange line, beneath the text “Quality products that we use ourselves”.

   You’ll insert a table into this space.

3. Choose Insert→Table.

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

4. Type 3 in the Rows box and type 3 in the Columns box.

   You’ll start with a basic 3 x 3 table, but as the tutorial progresses, ...