HTML Exercise 24 Tables

Exercise 24 Page 1

HTML Exercise 24 Tables

Tables allow you to put things in columns and rows. Without tables, you can only have one long list of text and graphics (check Exercise 20). If you have ever made a table in a word processor, you can make a table in HTML—it’s exactly the same concept. You can resize the entire table, resize the individual rows and columns, merge several cells intone cell, color the background of individual cells or the entire table.

Once you’ve got a table on the page, you can insert text into it, format text, insert graphics, and make links from the text and graphics.

Creating a Basic Table Table 1

In this lesson, you create a basic table by using these basic paired tags:

<TABLE>...</TABLE> Indicates a table. The tags surround the entire table.

<TR>...</TR> Indicates a table row. The tags surround the entire row.

<TD>...</TD> Indicates table data or a cell. The tags surround the entire cell.

Creating a basic table is easy. For the following example, suppose that you want to show your program on your Web page. Your program may look like this. This is a 7 row by 4 column table.

Table 2

Period Course Teacher Room

1 Math Andrew 26

2 English Varni 48

3 PE Wong Gym

4 Science Schaefer 40

5 History Rand 31

6 Computers Rubin 46

In the following exercise, you build this table starting with Row 1. Then using copy and paste you will add the other rows. Finally, you will format the table my merging a row, adding borders, aligning text, and learning to change column width. You learned how to do these things in Microsoft Word and Excel, so it will not be very hard to understand in HTML.

1. Double-click your HTML folder to open it.

2. Double-click the html_template.html document to open it.

3. Click View on the Menu bar and select Source.

4. The HTML code for the Web page will open in Notepad.

Exercise 24 Page 2

5. Click File on the Menu bar and select Save As.

6. The Save As dialog box opens.

7. Save in your HTML folder.

8. Change the file name to tables.html.

9. Click Save or press Enter.

10. Click the Internet Explorer button on the Taskbar.

11. Close the html_template.

Creating the Table 12. Click the Notepad document button on the Taskbar.

13. Change the Revision Date in the footer of the page to today’s date.

14. Below the date, add this line of code.

Revised--Date<BR> HTML Exercise 24<BR>

15. Use the Caps Lock key to make all caps for the tags.

16. Change the dummy text between the <TITLE>…</TITLE> tags.

<!DOCTYPE HTML PUBLIC "-W3C/DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>Deciding To Use A Table</TITLE>

Changing the Background Color of a Web Page 17. Locate the <BODY> tag.

18. Type this to make a dark yellow background color.

<BODY BGCOLOR="#FEDD6A"">


20. Click the Refresh button.

21. You should now see the Web page with a dark yellow background.

Matching the Background Color In order to make the heading transparent, always use a background color that will match the Web page.

22. Click Start, point to Programs , point to the Jasc Software folder, and select Paint Shop Pro 7.

23. Maximize the Paint Shop Pro window.

24. Click the triangle on the Foreground/Stroke button and select Solid .

25. Click the Foreground/Stroke button, but not on the triangle.

26. The Color dialog box opens.

27. Change the Hexadecimal Code to: .

Hexadecimal Code

Exercise 24 Page 3

28. Click OK.

29. Click the triangle on the Background/Fill button and select Solid .

30. Click the Background/Fill button, but not on the triangle.

31. The Color dialog box opens.

32. Under Basic colors , select White.

33. Click OK.

34. Under Textures, both the Foreground and Background should be set to Null .

35. Press Ctrl+N.

36. The New Image dialog box opens.

37. Under Image Dimensions , select 400 pixels for the Width and 150 pixels for the Height.

38. The Resolution should be set to 72 ppi.

39. For Background Color, select Foreground Color.

40. For Image Type , select 16.7 Million Colors.

41. Notice the Memory Required. This is far too large for a Web graphic. Don’t worry about it for now.

42. Click OK.

43. Click the Normal Viewing button on the Toolbar.

44. The canvas is now at full size.

Creating Text 45. Click the Text

tool on the Tool Palette.

46. Move the mouse over the drawing canvas.

47. Click on the drawing canvas.

48. The Text Entry dialog box opens.

49. Under Font, select a font with a heavy weight.

Exercise 24 Page 4

50. Under Size, select 72 or lower.

51. Select Bold

52. Select Center.

53. Under Create As, select Floating and Antialias.

54. Select Auto Kern. Kerning is the space between letters.

55. Click the Standard text button .

56. This turns off the Stroke color and leaves the Fill color.

57. Press the Caps Lock key and type TABLES in the text box.

58. Click OK.

59. The text is selected.

60. Move the mouse pointer over the selected text until the pointer turns to a four-headed arrow

.

61. The four-headed arrow is called the Mover tool.

62. Move the text horizontally to the middle of the canvas.

Creating Textured Text with SuperBladePro 63. Click Effects on the Menu bar, point to Plug-in Filters , point to Flaming Pear, and select

SuperBladePro.

64. The SuperBladePro dialog box opens.

Loading a SuperBladePro Preset 65. Click the Load Preset button

.

66. The Open a settings file dialog box will appear.

67. Double-click the Downloaded folder.

68. Select ____.q5q.

69. A preview of the effect will appear on the right.

70. Click Open.

71. You can now see a preview of the effect on your text.

72. Click the + sign so that you are looking at 100%.

73. Click OK.

Exercise 24 Page 5

Adding a Drop Shadow Effect 74. Click Effects on the Menu bar,

point to 3D Effects, and select Drop Shadow.

75. The Drop Shadow dialog box opens.

76. Click the Color box.

77. The Colors dialog box opens.

78. Under Basis Colors , select Black.

79. Click OK.

80. Copy the settings in the picture to the right.

81. Click OK.

82. Do not deselect the text.

83. Look at Figure 1.

Figure 1: Your teacher used the Autumn preset.

Saving as a Compressed GIF File Paint Shop Pro files are not compressed. GIF files are compressed and are much smaller in size.

84. Click File on the Menu bar, point to Export, and select GIF

Optimizer .

85. The GIF Optimizer opens.

86. Click the Transparency tab.

87. Select Outside the current selection.

88. Everything outside the selection will become transparent.

89. Click the Partial Transparency tab.

Exercise 24 Page 6

90. Copy the settings to the right.

91. Click the Colors tab.

92. Copy the settings to the right.

93. You need 256 colors, for this graphic to look good.

94. Notice how the two pictures look the same, but the file size is much smaller because it is compressed.

95. Click OK.

96. The Save As dialog box opens.

97. Look in your HTML folder.

98. Name the file heading12.gif.

99. Click Save or press Enter.

100. The file is now 9 times smaller in file size , and is now ready to be inserted into your tables.html file.

101. Close Paint Shop Pro.

Inserting a Picture in HTML To insert a picture use the <IMG SRC=“filename”> tag. The tag is nonpaired.

102. Click the tables.html Notepad document on the Taskbar.

103. Select this line of code:

<P>All of our wonderful text, graphics, hyperlinks, and sounds go here.</P>

104. Type this to make a new heading.

<P ALIGN="center"><IMG SRC="heading12.gif"></P>

105. Click File on the Menu bar and select Save.



108. Look at the picture to the right.

Exercise 24 Page 7

Creating an Introduction 109. Add this code beneath the heading.

</HEAD> <BODY BGCOLOR="#FEDD6A"> <P ALIGN="center"><IMG SRC="heading12.gif"></P> <P ALIGN="center">Tables are great for holding data or for giving you control over the layout of your Web page.</P> <H2 ALIGN="center">My Program</H2> <P ALIGN="center">This is my daily schedule. Click on a link to go to the teacher's Web page.</P>

Starting the Table The table must be surrounded by the paired tags

110. Add this code beneath the introduction.

<P ALIGN="center">This is my daily schedule. Click on a link to go to the teacher's Web page.</P> <TABLE> </TABLE>

Creating Row 1 111. Make the following changes between the <TABLE>…</TABLE> tags.

112. Use the Caps Lock key to make all caps for the tags.

<TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE>


114. Select the <TR>...</TR> tags and the < TD>…</TD> tags between them.

115. Press Ctrl+C to copy the row.

116. Each row of the table will have the same amount of cells.

117. Click to move the insertion point before the closing </TABLE> tag.

118. Press Enter.

Each <TD>…</TD> tag creates a cell. You made four cells across the row

Each <TR>…</TR> tag creates a row. You made 1 row that will take up the full page.

Exercise 24 Page 8

119. In the empty space you have created, press Ctrl+V to paste the tags 6 times.

120. Now you have a total of 7 rows with 4 cells each.

Adding Labels and Data to the Rows 121. Type your labels and data in between the <TD></TD> tags. Your HTML will look something

like below.

<TABLE> <TR> <TD>Period</TD> <TD>Course</TD> <TD>Teacher</TD> <TD>Room</TD> </TR> <TR> <TD>1</TD> <TD>Math</TD> <TD>Andrew</TD> <TD>26</TD> </TR> <TR> <TD>2</TD> <TD>English</TD> <TD>Varni</TD> <TD>48</TD> </TR> <TR> <TD>3</TD> <TD>PE</TD> <TD>Wong</TD> <TD>Gym</TD> </TR> <TR> <TD>4</TD> <TD>Science</TD> <TD>Schaefer</TD> <TD>27</TD> </TR> <TR> <TD>5</TD> <TD>Advanced Computers</TD> <TD>Rubin</TD> <TD>46</TD> </TR>

Row 1 contains your column labels. You have 4 columns of data.

Press Enter to create a space between rows.

Rows 2-7 contains your Period 1-6 data. You can use your own data or my dummy data.

Row 3

Row 4

Row 5

Row 6

Exercise 24 Page 9

<TR> <TD>6</TD> <TD>History</TD> <TD>Bernier</TD> <TD>47</TD> </TR> </TABLE>





Figure 2: The document will not be particularly pretty yet, but it’s a start.

Formatting Your Table Now that you have a table in your document, you're ready to spiff it up a little with borders, and formatting.

You format your table by adding subcommands within the <TABLE>, <TR>, or <TD> tags. Of course you can add bold, italics, and underlining as well. You will learn to format fonts and color rows and columns later.

Table 2 Table Subcommands

BORDER=“n” Draws a border around the cells in the number of pixels

CELLSPACING=“n” Inserts a number of pixel spaces between cells.

CELLPADDING=“n” Adds a number of pixel space between the text and the cell walls

WIDTH=“n” Changes the width of the table or cell based on n (number of pixels or percent).

ALIGN =“left” (or center or right) Controls the alignment of the table on the page.

Row 7

Exercise 24 Page 10

Applying Borders Using borders on tables helps your readers see data more clearly. However, you do not have to use borders at all. For example, tables with many rows and many columns may look too busy if you apply a border. In addition, if you have several tables on a page, borders might actually make the tables less readable. You have to decide for yourself whether the border helps. Try the table with and without the border to help you decide.

To apply borders to your table, follow these steps:

126. Click the Notepad button on the Taskbar.

127. Add a 3-pixel border to the opening <TABLE> tag.

128. The larger the number in the BORDER subcommand, the wider the borders on the table.

<TABLE BORDER="3"





Making Your Labels Stand Out To make your labels stand out, make the text bold.

<TR> <TD><B>Period</B></TD> <TD><B>Course</B></TD> <TD><B>Teacher</B></TD> <TD><B>Room</B></TD> </TR>




FILO—First in, last out

Figure 3

Exercise 24 Page 11

Figure 4136. Look at Figure 4.

Adding Spacing to Your Table Cell padding adds space around cell contents, to make the table look a little better. Cell spacing adds space between the cells, again, to make the table look a bit better. Both cell padding and cell spacing are measured in pixels.

Changing the cell padding and cell spacing is particularly important when you use tables to create columns. If your columns are too bulky, for example, they appear very close together, which can be just as difficult to read as one fat column. Similarly, if you don't have enough space between the individual cells, the information within the cells tends to blend together and appear like one fat cell with too much information in it.

You can either specify the width in a percentage of the window width or in an exact number of pixels. Width in percentage is less likely to cause problems with everything not fitting on a screen. This step establishes the table width at 600 pixels—a reasonable width to spread the table out within the narrowest screen you can anticipate your readers having.


138. Type the following subcommands within the opening <TABLE> tag

<TABLE BORDER="3" WIDTH="600" CELLSPACING="5" CELLPADDING="3">





Figure 5

143. Notice how much more readable the table is now.

Exercise 24 Page 12

Aligning Cell Contents Changing the alignment can help make the information easier to read. The table is aligned left by default. Cell contents are aligned left by default. You can change the alignment of a table, an entire row, or a cell by adding the ALIGN= subcommand within the <TR> or <TD> tags.


145. Add the ALIGN=“center” subcommand to the opening <TR> tag of the labels.

146.

147. Add the ALIGN=“center” subcommand to the opening <TR> tag of the labels.

<TABLE BORDER="3" WIDTH="600" CELLSPACING="5" CELLPADDING="3" ALIGN="center"> <TR ALIGN="center"> <TD><B>Period</B></TD> <TD><B>Course</B></TD> <TD><B>Teacher</B></TD> <TD><B>Room</B></TD> </TR>

148. Add the ALIGN= “center” subcommand to the other opening <TR> tags from Periods 1-6.





Figure 6: The labels and data in the each row should be centered. The table itself is centered.

The center subcommand in the <TR> tab affects the text in every cell of the row.

Exercise 24 Page 13

Inserting a Row of Merged Cells Well, now that you have a doggone good table, you may want to add a couple more cells to provide some additional information. You can merge two or more cells, which is handy for grouping information or just making the table look interesting.

COLSPAN=“n” indicates column that should span a certain number of columns (like a merged cell)


154. To create a new row made of merged cells, make the following changes to your after your opening <TABLE> tag:

<TABLE BORDER="3" WIDTH="600" CELLSPACING="5" CELLPADDING="3" ALIGN="center"> <TR> <TD COLSPAN="4" ALIGN="center"><B>200_-200_ Program</B></TD> </TR> <TR ALIGN="center"> <TD><B>Period</B></TD> <TD><B>Course</B></TD> <TD><B>Teacher</B></TD> <TD><B>Room</B></TD> </TR>




158. The new row with one merged cell should be visible.


Figure 7

Adding the Teacher Hyperlinks Andrew, Schaefer, and Rubin have Web pages. You can add hyperlinks to a table within the <TD>…</TD> tags. Here’s how to write the code. Remember that the teachers’ Web pages are in your HTML folder.


161. Change the HTML for Andrew’s, Schaefer’s, and Rubin’s cells.

The new Row 1 spans 4 columns. Add the school year in between the <TD>…</TD> tags.

Exercise 24 Page 14

<TD><A HREF="andrew.html">Andrew</A></TD>

<TD><A HREF="schaefer.html">Schaefer</A></TD>

<TD><A HREF="rubin.html">Rubin</A></TD>

Adding a Final Hyperlink You will next make a two-column table. This hyperlink will connect your first table with your second.

162. Type the HTML code below the closing </TABLE> tag

</TABLE> <P ALIGN="center"><A HREF="table2.html">Click here to go to Table 2.</A</P>




166. The hyperlink should be visible.


Figure 7: The completed table.

Exercise 24 Page 15

Uploading Your Documents 168. In Internet Explorer, type www.geocities.com in the Address bar text box and press Enter.

169. Type your user name and password.

170. Press Enter or click the Sign in button.

171. Under Advanced Toolbox, click .

• Upload tables.html

• Upload heading12.gif

172. Click the button to copy the files to the Geocities server.

173. A new page will open telling you that you have successfully uploaded the files.

174. Click the hyperlink to your home page .

175. Click .

Printing the Web Page 176. Before printing, click View on the Menu bar, point to Text Size , and select Medium.

177. Press Ctrl+P.

178. The Print dialog box opens.

179. Change the Name to Ireland.

180. Change the Number of copies to 2.

181. Click OK.

182. Your teacher will go online to check your Web page and mark the grade on the printed copy.

183. Close all windows.