1. Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE

2. Chapter 5 Lessons 1.Create a table 2.Resize, split, and merge cells 3.Insert and align images in table cells 4.Insert text and format cell content

3. Tables  Are placeholders made up of small boxes (cells), into which you can insert text and graphics  Consist of cells  Arranged horizontally in rows and vertically in columns  Give you control over the placement of each object

4. Inserting Graphics and Text in Tables  Control placement of elements in relation to each other  Specify amount of space between each page element  Always plan how your table will look with all the text and graphics in it  Even a rough sketch will save you time

5. Create a Table  Understanding table modes  Creating a table in standard mode  Planning a table  Setting table accessibility preferences for tables  Drawing a table in layout mode

6. Understanding Table Modes There are two ways to create a table:  Click Table on the Insert bar  Click View, Table Mode, Layout Mode; then click the Draw Layout Table button or the Draw Layout Cell button

7. Anatomy of a Table Cell Border Row Cell Spacing

8. Anatomy of a Cell  Vertical alignment  Horizontal alignment  Width  Height  Text Wrap  Border color  Border width  Background image  Background color Cell

9. Anatomy of a Row  Vertical alignment  Horizontal alignment  Width  Height  Text Wrap  Border color  Border width  Background image  Background color Row

10. Anatomy of a Table  Rows  Columns  Width  Cell padding  Cell spacing  Alignment  Border color  Border width  Background color  Background graphic table

11. Standard Mode  Useful when you want to create a table with a specific number of columns and rows  Use the Table dialog box to set:  Rows, columns, border thickness, table width, cell padding, and cell spacing

12. Planning a Table  Sketch a plan for a table that shows its location on the Web page and the placement of text and graphics in its cells  Decide whether to include borders around the tables and cells.  Setting the border value to 0 causes the table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code

13. Accessibility Preferences  To make a table more accessible to visually handicapped viewers, add  Table caption  Table summary (does not appear on screen)  Table headers  Can be placed at the top or sides of table  Are automatically centered and bold

14. Drawing a Table in Layout Mode  Ideal when placing elements on a Web page without specifying number of rows and columns  Draw Layout Cell button  Layout Table button

15. Fig. 3: Sketch of Table on Café Page

16. Table properties Header options Accessibility options Fig. 4: Table Dialog Box

17. Expanded Tables Mode  Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing  Easier to actually see how many rows and columns you have in your table  The Expanded Tables mode allows you to see each cell clearly

18. Displays more space between cells for easier editing Fig. 6: Expanded Tables Mode

19. Table displayed in layout mode Layout tab Fig. 8: Table in Layout Mode Standard mode button Expanded mode button

20. Resize, Split and Merge Cells  You can resize the rows or columns manually or by entering numbers in the properties inspector  You can also take one cell and split it into two or more cells  You can take two or more cells and merge them into one cell

21. Cell tag icon W text box Selected cell Fig. 9: Selecting a Cell

22. Resizing pointer Fig. 10: Resizing the Row Height

23. Number of rows text box Splits cell into Rows or Columns button Fig. 11: Splitting a Cell into Two Rows

24. Two cells split from one Fig. 12: Splitting One Cell into Two

25. colspan tag Fig. 14: Code View for Merged Cells

26. Insert Images in Table Cells  Use the Image command on the Images Menu on the Insert bar  Drag it from the Assets panel into cell

27. Aligning Images in Table Cells  You can align graphics horizontally and vertically within a cell  Use the Horz (or Vert) alignment option in the Property inspector  To control spacing between cells, use cell padding and cell spacing

28. Vertical alignment options Fig. 16: Vertically Aligning Cell Contents

29. cafe_logo.gif cheesecake.jpg Fig. 18: Images Inserted into Cells

30. Centered banner and navigation bar Centered logo Centered cheesecake photo Left-aligned cafe photo Fig. 20: Aligning Images in Cells

31. Inserting Text in a Table  Type  Copy/paste  Import

32. Format Cell Content  Easier to do in Standard mode than in Layout mode  Select the contents in the cell, then apply formatting to it  Can format each item individually or select the entire cell and format it

33. Formatting Cells  Different than formatting cell content  Can include setting properties that visually enhance the cell appearance  Cell width, background color, alignment  Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector

34. Image selected inside a cell Properties for selected graphic Fig. 21: Property Inspector Showing Options for Formatting Cell Contents

35. Properties for selected cell, not image Insertion point in cell Fig. 22: Property Inspector Showing Options for Formatting a Cell

36. Imported text describing the cafe Text typed into cell Fig. 23: Importing and Typing Text into Cells

37. Importing Text  Can import delimited text file  Export as delimited text from  Spreadsheet program  Database program  Import tabular data to Dreamweaver

38. Top row header Nested table Fig. 25: Adding Nested Tables

39. Vert and Horz list arrows Insertion point inside cell with no elements selected Fig. 27: Formatting Cells Using Horizontal Alignment

40. Hide all visual aids option Visual aids button Fig. 29: Hiding Visual Aids Dotted lines show borders are hidden

41. Chapter 5 Tasks  Create a table  Resize, split, and merge cells  Insert and align images in table cells  Insert text and format cell content