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

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

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

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

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

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

Anatomy of a Table Cell Border Row Cell Spacing

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

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

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

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

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

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

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

Fig. 3: Sketch of Table on Café Page

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

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

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

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

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

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

Resizing pointer Fig. 10: Resizing the Row Height

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

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

colspan tag Fig. 14: Code View for Merged Cells

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

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

Vertical alignment options Fig. 16: Vertically Aligning Cell Contents

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

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

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

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

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

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

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

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

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

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

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

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

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