CIS 205—Web Design & Development

DreamweaverChapter 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 table1. Open The Striped Umbrella Web site as completed in

Chapter 4, double-click café.html in the Files panel2. Click the Layout tab on the Insert bar, click the Standard

mode button, click the Table button3. 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 properties1. 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 mode1. 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 button3. 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 columns1. In café.html, click inside the first cell in the bottom

row, then click <td> 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 rows1. 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 cells1. Click the first cell in the fifth row, click <td> in the tag

selector2. Click the Splits cell into rows or columns button in

the PI3. Click the Split cell into Rows option button, type 2 in

the Number of rows text box, click OK

• Merge cells1. Click the first cell in the top row, then drag to the

right to select all three cells in the top row2. 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 cells1. 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 text6. 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 cells1. Click the banner, click the Align Center button in the

PI2. Center-align the logo and cheesecake images, left-

align the café photo3. 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 text1. Merge the two cells to the right of the café logo, click

this new cell, then import café.doc from the Data Files2. 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 table1. Merge the two empty cells below the café photo2. Click this new cell, click the Table button on the

Common tab of the Insert bar3. 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 content1. Expand the CSS panel group2. 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_text4. Select the text Banana Chocolate Cheesecake and

apply the bullets style5. Select the Our signature desert text and apply the

body_text style6. Repeat Step 5 for the text about reservations and the

nested table

Lesson 4: Insert Text and Format Cell Content (4)

• Format cells1. Click the cell with the cheesecake name2. Click the Horz list arrow in the PI, click Center3. Repeat Steps 1 and 2 for the cells with the reservation

text and the nested table4. Click the cell with the reservations text, click the Vert

list arrow in the PI, click Middle5. Save your work and preview in a browser

Lesson 4: Insert Text and Format Cell Content (5)

• Modify cell content1. Click Modify on the menu bar, click Navigation Bar2. Click the Show “Down image” initially check box to

remove the check mark for the home button3. 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 layout1. Click the Visual Aids button on the Document toolbar,

click Hide All Visual Aids2. Repeat Step 1 to show the visual aids again3. Save your work and preview in a browser