Embed Size (px)
Citation preview
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 <table border="0" cols="2“ width="90%"> and then press the ENTER key
6
7
If necessary, click line 11, type <tr> as the tag, and then press the ENTER key
Type <td><img src=“bellvideologo.gif” width=“430” height=“74” alt=“Bell Video Logo” /></td> and then press the ENTER key
Type <td><img src="csexcellence.gif" width="108” height=”94” alt=”Excellence Award” /></td> and then press the ENTER key
Type </tr> and then press the ENTER key Type </table> 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 < in
the <!DOCTYPE html tag on line 1. Drag through the first </table> 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 <title> and </ title > tags on line 7. Type - New Releases as the text
Click immediately to the right of the </table> tag on line 15. Press the ENTER key three times
Type </body> and then press the ENTER key
Type </html> 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 164
24
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 <!--Insert caption here --> on line 69
Type <caption align=“bottom”><em>Listing of movies by actor</em></caption> as the tag
30
31
32
Highlight the <!—Insert Movies by Type colspan here --> text on line 29. Type <tr> and then press the ENTER key
Type <th colspan="3" bgcolor="lightsteelblue"> and then press the ENTER key
Type <font color="#993366“ face="chaucer“ size="+2">Movies by Type</font> and then press the ENTER key
Type </th> and then press the ENTER key Type </tr> as the end table row tag
33
34
Highlight <!--Insert Action rowspan here --> text on line 34
Enter the HTML code as shown in Table 4-9 on page HTM 179
35
36
Highlight the <!--Insert Comedy rowspan here --> text on line 66 and then press the DELETE key
Type <tr> and then press the ENTER key Type <th rowspan="4" bgcolor="#336699"> and then press the ENTER key
Type <font color="#ffffff“ size="+1">Comedy</font> and then press the ENTER key
Type </th> as the tag
37
38
Highlight the <!--Insert Title - Actor(s) colspan here --> text on line 70
Type <th colspan="2" bgcolor="thistle"> and then press the ENTER key
Type <font color="#336699" size="+1">Title - Actor(s)</font> and then press the ENTER key
Type </th> and then press the ENTER key Type </tr> and then press the ENTER key
39
40
41
