LESSON 34: INTRODUCTION TO TABLES

1. Study the index cards on Introduction To Tables. I've included a hard copy of these index cards, for your convenience.
2. Do Table Worksheet #1 and Table Worksheet #2 from Introduction To Tables.
3. Be sure that you can answer all the following questions, which are fair game for quizzes and tests.
   1. What is a "table"?
   2. Does a table have to have a border? If not, how do you get one?
   3. What does "TD" stand for, in the context of tables?
   4. What does "TR" stand for, in the context of tables?
   5. Write the HTML code to produce the following table:
      

      first row, first column	first row, second column
      second row, first column	second row, second column

   6. What does "TH" stand for, in the context of tables?
   7. Write the HTML code to produce the following table, which takes up the full page width:
      

      this spans 2 columns		this cell is red
      centered text	left-aligned text	right-aligned text

   8. Write the HTML code to produce the following table:
      

      cell 1	cell 2	cell 4	cell 8
      cell 3		cell 5
      		cell 6	cell 9
      		cell 7

   9. Does the following table have CELLPADDING or CELLSPACING?
      

      cell 1	cell 2
      cell 3	cell 4

   10. Does the following table have CELLPADDING or CELLSPACING?
       

       cell 1	cell 2
       cell 3	cell 4

   11. Write the HTML code to produce the following table. Notice how text is both vertically and horizontally centered.
       

       This row has height 75 pixels and width 300 pixels
       25%	50% of width	25%

   12. Is there a difference in the way that the BACKGROUND attribute is treated in Internet Explorer and Netscape Navigator? If so, comment.
   13. Study the following code. What color will cell #1 be?
       <TABLE BORDER BGCOLOR="red">
<TR BGCOLOR="yellow"><TD>cell 1</TD><TD BGCOLOR="blue">cell 2</TD></TR>
<TR><TD>cell 3</TD><TD BGCOLOR="green">cell 4</TD></TR>
</TABLE>
   14. Study the following code. What color will cell #2 be?
       <TABLE BORDER BGCOLOR="red">
<TR BGCOLOR="yellow"><TD>cell 1</TD><TD BGCOLOR="blue">cell 2</TD></TR>
<TR><TD>cell 3</TD><TD BGCOLOR="green">cell 4</TD></TR>
</TABLE>
   15. Study the following code. What color will cell #3 be?
       <TABLE BORDER BGCOLOR="red">
<TR BGCOLOR="yellow"><TD>cell 1</TD><TD BGCOLOR="blue">cell 2</TD></TR>
<TR><TD>cell 3</TD><TD BGCOLOR="green">cell 4</TD></TR>
</TABLE>
   16. Study the following code. What color will cell #4 be?
       <TABLE BORDER BGCOLOR="red">
<TR BGCOLOR="yellow"><TD>cell 1</TD><TD BGCOLOR="blue">cell 2</TD></TR>
<TR><TD>cell 3</TD><TD BGCOLOR="green">cell 4</TD></TR>
</TABLE>
4. Continue reading in Chapter 12 in the Weasel book, from the middle of page 176 ("Vertical Alignment") to the middle of page 180 (up to "Horizontal Rules").
   Be able to answer all the following questions, which are fair game for quizzes and tests.
   1. What are the universally supported values for vertical alignment of an image?
   2. What is the default vertical alignment of an image?
   3. What is the vertical alignment of this image?
      Here is a tree.
   4. What is the vertical alignment of this image?
      Here is a tree.
   5. What is the vertical alignment of this image?
      Here is a tree.
   6. Write the code to produce the following. Assume the image is stored in "tree.gif".
      Here is a tree.
   7. Write the code to produce the following. Assume the image is stored in "tree.gif".
      Here is a tree.
   8. Write the code to produce the following. Assume the image is stored in "tree.gif".
      Here is a tree.
   9. Write the IMG tag for each of the three situations below. Assume the image is stored in "tree.gif". (Thanks to Robert Frost.)

      #1: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

      #2: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

      #3: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

   10. Write the IMG tag for each of the three situations below. In each case, 20 pixels of "space" has been added in a particular way. Assume the image is stored in "tree.gif".(Thanks to Robert Frost.)

       #1: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

       #2: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

       #3: Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

   11. Write the HTML code that shows how you can get right-alignment without text wrap:

       Whose woods these are, I think I know. His house is in the village, though. He will not see me stopping here to watch his woods fill up with snow.

   12. How can you stop the text wrap for a left or right-aligned graphic?
   13. What is one bandwidth-friendly strategy for providing access to a very large image?
   14. If you use a tiny preview of an image to link to a full-sized graphic, what information should you provide to the user to help them decide if they want to spend time clicking the link?
   15. When a browser downloads a graphic, where does it store it?
   16. When you use the same graphic repetitively on a web page, does the browser need to download it more than once?
   17. Briefly discuss the "lowsrc" attribute for the IMG tag.
   18. What browser(s) support the "lowsrc" attribute for the IMG tag?

• (15 pts) Questions from the index cards and reading (see below).
  There will be 20 randomly-chosen questions; you will cross off 5 questions.
  The remaining 15 questions are worth 1 point each.
• (30 pts) CODING PART: You will be given a handout, using the ideas from Table Worksheets #1 and #2, which you must code, without using any resources (no book, no notes, etc.).