CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page

Chapter 5: Using HTML Tables Introduction – Improved page layouts are possible using tables – A table is a placeholder consisting of cells that are arranged in rows and columns – You can place text or graphics within desired cells Inserting Graphics and Text in Tables – You should plan your table and all its contents before inserting it on a page – Draw a sketch of the page with the table if necessary

Lesson 1: Create a Table Understanding Table Modes – To create a table, click the Table button on the Insert bar (Common tab or Layout tab) – Also, you can create a table by clicking View, Table Mode, Layout Mode and proceed from there – To reset tables to Standard Mode, click View, Table Mode, Standard Mode

Lesson 1: Create a Table (2) Creating a Table in Standard Mode – This method is good for creating a table with a specific number of rows and columns – A border is an outline around the cells of the table (can be set to 0 for invisible borders) – A table width of 100% will completely fill the browser window (50%, half the window) – The table width can also be in pixels (fixed size) – Cell padding is the distance between cell content and cell walls – Cell spacing is the distance between cells

Lesson 1: Create a Table (3) Planning a Table – First, draw a sketch of the table and its contents – A table used only for page layout should have 0 border Setting Table Accessibility Preferences for Tables – Add a table caption and table summary to make it more accessible to the handicapped (especially for tables that contain data) – Table headers can also be used for this purpose Drawing a Table in Layout Mode – Use this mode to draw your own table – This mode is primarily used for layout purposes (no fixed numbers of rows and columns)

Lesson 1: Create a Table (4) Create a table 1.Open The Striped Umbrella Web site as completed in Chapter 4, double-click café.html in the Files panel 2.Click the Layout tab on the Insert bar, click the Standard mode button, click the Table button 3.Type 7 in the Rows text box, 3 in the Columns text box, 750 in the Table width text box, click the Table width list arrow, click pixels, type 0 in the Border thickness text box 4.Type This table is used for page layout in the Summary text box, click OK 5.Click the Expanded Tables mode button on the Layout tab, click OK in the dialog box 6.Click the Standard mode button

Lesson 1: Create a Table (5) Set table properties 1.Move the pointer near the top or bottom of the table until you see a small grid next to the pointer, then click the table border to select the entire table 2.In the PI (Property inspector), click the Align list arrow, click Center to center the table on the page View the table in Layout mode 1.Click View on the menu bar, point to Table Mode, click Layout Mode (click OK in the dialog box if necessary) 2.Click the Standard mode button 3.Click the Common tab on the Insert bar

Lesson 2: Resize, Split, and Merge Cells Resizing Table Elements – To resize a table or its columns, rows, or cells manually, you select the table, then use the selection handles To resize all columns equally, drag the middle-right handle To resize all rows equally, drag the middle-bottom handle To resize the entire table, drag the right-corner handle To resize a single row or column, drag interior cell borders To resize selected columns, rows, or cells, enter values in the W and H text boxes in the PI

Lesson 2: Resize, Split, and Merge Cells (2) Splitting and Merging Cells – A new table has evenly spaced rows and columns – To split a cell, you divide it into multiple rows or columns – To merge cells, you combine them into one cell – Splitting and merging cells can provide a more interesting layout for a web page – To add or delete rows or columns, select a row or column, then click Modify on the menu bar, point to Table, click Insert Row or Insert Column – You can create a nested table by placing the insertion point in a cell, then creating a new table in that cell

Lesson 2: Resize, Split, and Merge Cells (3) Resize columns 1.In café.html, click inside the first cell in the bottom row, then click on the tag selector at the bottom of the Document window (this selects the cell) 2.Type 30% in the W text box in the PI, press [Enter], which changes the width of the entire column 3.Repeat Steps 1 and 2 using 30% for the middle cell and 40% for the last cell Resize rows 1.Select a cell in the first row and type 50 (pixels) in the R text box in the PI (or drag the bottom cell border) 2.Use the History panel to reverse Step 1

Lesson 2: Resize, Split, and Merge Cells (4) Split cells 1.Click the first cell in the fifth row, click in the tag selector 2.Click the Splits cell into rows or columns button in the PI 3.Click the Split cell into Rows option button, type 2 in the Number of rows text box, click OK Merge cells 1.Click the first cell in the top row, then drag to the right to select all three cells in the top row 2.Click the Merges selected cells using spans button in the PI

Lesson 2: Resize, Split, and Merge Cells (5) Inserting Images in Table Cells – Insert images into cells by clicking Insert on the menu bar and clicking Image – Or insert images by dragging images from the Assets panel into the table cells – In either case, you are prompted to enter Alternative text for an image Aligning Images in Table Cells – Align images vertically or horizontally in a cell by selecting the cell and using the Horz or Vert list arrows in the PI

Lesson 2: Resize, Split, and Merge Cells (6) Insert images in table cells 1.Open index.html, click the banner image, press and hold [Shift], click to the right of the navigation bar (to select both the banner and the nav bar) 2.Click Edit on the menu bar, click Copy, close index.html 3.Click the top cell in café.html, click Edit on the menu bar, click Paste 4.Click cell (3, 1)—row 3, column 1—click Insert on the menu bar, click Image, double-click café_logo.gif from your Data Files, type Sand Crab Café logo as alt text

Lesson 2: Resize, Split, and Merge Cells (7) Insert images in table cells (continued) 5.Repeat Step 4 to insert cheesecake.jpg in cell (5, 1) using Banana Chocolate Cheesecake for alt text 6.Merge the two cells to the right of the cheesecake graphic, insert café_photo.jpg in this newly merged cell using The Sand Crab Café as the alt text 7.Refresh the Assets panel to verify that the new images are copied to the Web site 8.Save you work and preview in a browser

Lesson 2: Resize, Split, and Merge Cells (8) Align graphics in table cells 1.Click the banner, click the Align Center button in the PI 2.Center-align the logo and cheesecake images, left- align the café photo 3.Save you work and preview in a browser

Lesson 4: Insert Text and Format Cell Content Inserting Text in a Table – You can type text, copy and paste it, or import it into a cell – Then you can format the text in the cell Formatting Cell Content – It is easier to format cell text using Standard mode – Select the text and apply formatting – You can format an entire cell by selecting the cell or format different items in a cell individually Formatting Cells – Select the entire cell and use the PI

Lesson 4: Insert Text and Format Cell Content (1) Insert text 1.Merge the two cells to the right of the café logo, click this new cell, then import café.doc from the Data Files 2.Click the cell below the cheesecake photo, type Banana Chocolate, press [Shift][Enter], type Cheesecake, press [Shift][Enter], type Our signature desert 3.Click Commands on the menu bar, click Clean Up Word HTML, click OK

Lesson 4: Insert Text and Format Cell Content (2) Insert text using a nested table 1.Merge the two empty cells below the café photo 2.Click this new cell, click the Table button on the Common tab of the Insert bar 3.Type 4 in the Rows text box, 2 in the Columns text box, 300 in the Table Width text box, click the Table Width list arrow, click pixels, type 0 in the Border thickness text box, click the Top row header icon in the Header section, type This table contains the café hours. in the Summary text box, click OK 4.Merge the two cells in the top row of the nested table, click this cell, type Sand Crab Café Hours 5.Enter the café hours as shown on page 5.25

Lesson 4: Insert Text and Format Cell Content (3) Format cell content 1.Expand the CSS panel group 2.Click the Attach Style Sheet button (at the bottom of the panel), click OK (to attach the su_styles.css file) 3.Select the paragraph next to the café logo, click the Style list arrow in the PI, click body_text 4.Select the text Banana Chocolate Cheesecake and apply the bullets style 5.Select the Our signature desert text and apply the body_text style 6.Repeat Step 5 for the text about reservations and the nested table

Lesson 4: Insert Text and Format Cell Content (4) Format cells 1.Click the cell with the cheesecake name 2.Click the Horz list arrow in the PI, click Center 3.Repeat Steps 1 and 2 for the cells with the reservation text and the nested table 4.Click the cell with the reservations text, click the Vert list arrow in the PI, click Middle 5.Save your work and preview in a browser

Lesson 4: Insert Text and Format Cell Content (5) Modify cell content 1.Click Modify on the menu bar, click Navigation Bar 2.Click the Show “Down image” initially check box to remove the check mark for the home button 3.Click café in the Nav bar elements box, click the Show “Down image” initially check box to add a check mark, click OK Use visual aids to check layout 1.Click the Visual Aids button on the Document toolbar, click Hide All Visual Aids 2.Repeat Step 1 to show the visual aids again 3.Save your work and preview in a browser