Creating Tables in a Web Site

 Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize images  Create a vertical menu bar with text links 2

 Create a borderless table to organize text  Create a horizontal menu bar with text links  Create a table with borders  Change the horizontal alignment of text 3

 Add background color to rows and cells  Alter the spacing between and within cells using the cellspacing and cellpadding attributes  Insert a caption below a table  Use the rowspan and colspan attributes 4

5

 If necessary, click line 10  Type and then press the ENTER key 6

7

 If necessary, click line 11, type as the tag, and then press the ENTER key  Type and then press the ENTER key 8

 If necessary, click line 17  Enter the HTML code shown below  Press the ENTER key twice 9

10

 If necessary, click line 27  Enter the HTML code as shown in Table 4-5 on page HTM 151 and then press the ENTER key 11

12

13

 Click the Notepad button on the taskbar  Click immediately to the left of the tag on line 15 to highlight lines 1 through 15  Press CTRL+C to copy the selected lines to the Clipboard  Click File on the menu bar and then click New  Press CTRL+V to paste the contents from the Clipboard into a new file 14

15

 Highlight the words, — Great Service, Great Selection, between the and tags on line 7. Type - New Releases as the text  Click immediately to the right of the tag on line 15. Press the ENTER key three times  Type and then press the ENTER key  Type as the end tag 16

17

 Highlight line 13, which contains the code to insert the image, csexcellence.gif  Press the DELETE key twice 18

19

 If necessary, click line 16  Enter the HTML code as shown in Table 4-6 on page HTM 159  Press the ENTER key twice 20

21

 If necessary, click line 28  Enter the HTML code as shown in Table 4-7 on page HTM 162  Press the ENTER key twice 22

23

 If necessary, click line 53  Enter the HTML code as shown in Table 4-8 on page HTM

25

 With a floppy disk in drive A, click File on the menu bar and then click Save As. Type newreleases.htm in the File name text box  If necessary, click 3½ Floppy (A:) in the Save in list. Click the Project04 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box  Click File on the menu bar and then click Print on the file menu 26

27

 Click immediately to the right of the 5 in border=“5” in line 28 and then press the SPACEBAR  Type cellpadding=“2” cellpadding=“5” as the attributes 28

29

 Highlight the text on line 69  Type Listing of movies by actor as the tag 30

31

32

 Highlight the text on line 29. Type and then press the ENTER key  Type and then press the ENTER key  Type Movies by Type and then press the ENTER key  Type and then press the ENTER key  Type as the end table row tag 33

34

 Highlight text on line 34  Enter the HTML code as shown in Table 4-9 on page HTM

36

 Highlight the text on line 66 and then press the DELETE key  Type and then press the ENTER key  Type Comedy and then press the ENTER key  Type as the tag 37

38

 Highlight the text on line 70  Type and then press the ENTER key  Type Title - Actor(s) and then press the ENTER key  Type and then press the ENTER key 39

40

41