Lesson 8: Working with Tables Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Lesson 8: Working with Tables

Introduction to Adobe Dreamweaver CS6Adobe Certified Associate:

Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 2

Overview

3

4.11 Import Tabular Data to a Web Page

• Tables are ideal for displaying tabular data. • Over the years, Dreamweaver has steadily

introduced tools and visual aids to help people work with tables.

• Dreamweaver has mirrored the Web in that it has begun to shift its focus to CSS layout rather than table layout.

• Thus, the table is reclaiming its original purpose: displaying tabular data.

© 2013 John Wiley & Sons, Inc.

4


• Tabular data refers to data that has been exported from a spreadsheet and can be formatted by Dreamweaver as a table.

• A majority of tabular data is exported from spreadsheet programs in the .csv (comma-separated values) and .txt (text) file formats. These are called comma, tab, or other delimited files.

• This means that a spreadsheet application converts the data within its rows and columns to an intermediate format that Dreamweaver can read.


5


• Although Dreamweaver can open these files, it does not format them directly.

• Below is how Dreamweaver displays the raw .csv file that you will be working with:


6


Follow these steps to import table data:1. In the Files panel, open the tips.html file.2. Click after the last sentence in the main

paragraph and press Enter (Windows) or Return (Mac OS). Choose File > Import > Tabular Data. The Import Tabular Data dialog box opens.

3. In the Import Tabular Data dialog box, press the Browse button and locate the temperate_zones.csv file in your dw08lessons folder. Press Open.


7


4. Click on the Delimiter menu to see the various options. You will choose Comma. In the Table width section, leave the Fit to data option selected as shownhere.


8


5. Press OK and your table is imported. It has 3 columns and 12 rows (right). Confirm this in the Property Inspector, which has a field for columns and rows as well as other useful ways to work with tables.


9


6. Press Dreamweaver’s Code view button to see the code that makes up this table.

• The table is now ready for your formatting. As you can see, you can save yourself a lot of time if your source data is properly formatted.


10


Follow these steps to modify the table size:1. Select your table using any method. In the

Property Inspector, type 550 in the W text field and make sure the drop-down menu to the right is set to pixels, then press Enter (Windows) or Return (Mac OS). This expands the table to a width of 550 pixels.


11


2. Choose File > Save, then File > Preview in Browser. Resize the browser window a few times. Because the table has a fixed width of 550 pixels, its width stays constant.

3. In the W (Width) text field, type 75 and choose % from the drop-down menu.


12


4. Reset your table to the original width of 550 pixels.

5. Place your cursor over the dividing line between the first and second columns. Your cursor changes to a double-arrow. Click and drag slowly to the right to expand the width of the first column.


13


6. Expand the first column to at least 50 pixels; the content in the second column breaks to the next line. Place your cursor on the dividing line between the second and third column. Click and drag to narrow the third column (thereby expanding the second).


14


7. Place your cursor above the first column and click once to select it. The Property Inspector expands, allowing you to adjust this column’s properties. Type 45 into the W text field.


15


8. Click above the second column to select it. Type 100 into the W field. Click above the third column and type 400 in the W text field. You also have the ability to create a fixed height for rows.

9. Click on the left edge of the top row to select the whole row. In the Property Inspector, type 35 in the H text field, and press Enter (Windows) or Return (Mac OS).


16


Follow these steps to insert rows and columns:1. Click inside any cell within the first row. 2. Choose Modify > Table > Insert Rows or

Columns. The Insert Rows or Columns dialog box opens.

3. The Insert Rows radio button should be selected. For Number of rows, leave the value 1. In the Where section, select Above the Selection (right). Press OK.


17


4. Place your cursor on the left side of the new row until the red outline appears. Click once to select it. In the Property Inspector, locate the Header checkbox and check it to designate this row as a Header row.

5. With the top row selected, right-click (Windows) or Ctrl+click (Mac OS) to open a contextual menu. Choose Table > Merge Cells, and the three cells merge into one. This is referred to as columnspan.


18


6. Click inside this merged cell and type US temperate zones with average min. temperatures. (right)


19


Follow these steps to style a table in HTML:1. In the Best months to plant vegetables table,

click on the edge of the header row to select it. In the Property Inspector, click on the HTML category, then click the Bg (Background) color swatch. In the left column of swatches, choose (#CCCCCC).


20


2. Click inside the April cell, then drag until you reach the cell containing Spinach.

3. Click in the Bg swatch text field and type #FFFCCC. All four rows now have the same background color.

4. Click on the left edge of the empty row above the row labeled May. Click the Bg color swatch and choose white. Then click in the May cell and drag to cucumbers cell. Click the Bg color swatch and choose, #FFCCFF.


21


5. Click at the top of the first column. In the Property Inspector, from Horz (Horizontal) drop-down menu, select Center. Select the second column and repeat this step to center this text.


22


6. Choose File > Save, then File > Preview in Browser. There are more properties that you can adjust to make this table look better.

7. Click in a corner of the table until it is outlined in red. Then click on the table to select it. In the Property Inspector, locate the text field for CellPad and type 10. Press Enter (Windows) or Return (Mac OS). There are now 10 pixels of space added to the inside of all cells.


23


8. With your table still selected, locate the text field for CellSpace in the Property Inspector. Type 10 in the CellSpace text field, then press Enter (Windows) or Return (Mac OS). The width between the cells is increased.


24


9. In the Property Inspector, type 0 in the CellSpace text field and press Enter (Windows) or Return (Mac OS). This removes cellspacing. At this point, you only have properties for cellpadding.

10. With the table still selected, locate the text field for Border. Replace the default of 1 pixel with 0 and press Enter (Windows) or Return (Mac OS). This removes the border completely.


25


11. Place your cursor on the small black square on the lower-right of the table. Click and drag the table to the left to reduce its width.


26


12. With the table still selected, press the Split view button to see the code. In the first line of the table, you see the settings for the width, height, border, and cell padding. In all the <td> or cells, you see the properties for alignment and background color repeated for every row.


© 2013 John Wiley & Sons, Inc. 27

Lesson Summary

Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.

Documents

Lesson 8: Working with Tables Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6