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

Overview © 2013 John Wiley & Sons, Inc. 2

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. 3

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 4

4.11 Import Tabular Data to a Web Page 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: © 2013 John Wiley & Sons, Inc. 5

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 6

4.11 Import Tabular Data to a Web Page 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 shown here. © 2013 John Wiley & Sons, Inc. 7

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 8

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 9

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 10

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 11

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 12

4.11 Import Tabular Data to a Web Page 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). © 2013 John Wiley & Sons, Inc. 13

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 14

4.11 Import Tabular Data to a Web Page 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). © 2013 John Wiley & Sons, Inc. 15

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 16

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 17

4.11 Import Tabular Data to a Web Page 6.Click inside this merged cell and type US temperate zones with average min. temperatures. (right) © 2013 John Wiley & Sons, Inc. 18

4.11 Import Tabular Data to a Web Page 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). © 2013 John Wiley & Sons, Inc. 19

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 20

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 21

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 22

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 23

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 24

4.11 Import Tabular Data to a Web Page 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. © 2013 John Wiley & Sons, Inc. 25

4.11 Import Tabular Data to a Web Page 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 or cells, you see the properties for alignment and background color repeated for every row. © 2013 John Wiley & Sons, Inc. 26

Lesson Summary © 2013 John Wiley & Sons, Inc. 27

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.