Web Page Tables

CS 297

Jan. 21, 1997

If you have questions regarding how to do something, call me over. Nothing needs to be handed-in, nor do you need to print anything. Answer any questions asked in the exercise.

Today we will be face-to-face with the editor's deficiencies. I'm asking you to apply formatting to rows/columns of cells. It's easy to select a row or a column of a table in MS Word. Unfortunately, this is not possible in Netscape's editor. Cell formatting (properties, actually) will have to be applied one cell at a time. What do you expect for nothin'? (Netscape costs nothing for educational users.)

Today, we will build a newsletter for the College.

1. Open a new, blank web page in your ``scratch'' folder. Name the page table.htm. Apply a background color to the page.

2. Insert a table. This table will be used for the title banner of the newsletter. The table should have 1 row and 3 columns and its width should be 100% of the window width. Each cell's width should be 33% of the table's width. Horizontally, the left cell should be aligned left, the center cell centered, and the right cell right aligned. Each cell should use Header Style.

   Use white for the font color. Put today's date in the left cell, your newsletter title in the center cell and your name in the right cell. Use vertical alignment so that the title appears above the date and your name. Use alignment and a minimum table height in pixels to place a sufficient amount of separation between the date and name and the body of the newsletter.

3. Following the table you just created, insert a second table. This table should have 3 rows and 5 columns. The table's width should be 100% of the window width. The column widths, as a percentage of the table width, from left to right should be: 10%, 37%, 5%, 10%, and 37%. Note that these widths may have to be applied one cell at a time. The text says that you need only apply it to one cell in each column, but that didn't work for me. Try applying it to one cell per column and if that doesn't work, apply it to each cell individually. The alignment to use is Top, vertically, and left, horizontally.

4. The first and fourth columns will be used for images. You have six cells. Place an image in each cell (find your own images or use the six images below wcbanner.gif on the College's home page. If you use the images from the College's home page, remove the links once you've copied the images.

5. Use white for the row color in the first and third rows. Use blue for the row color in the second row.

6. The second and fifth columns are for text associated with each image. Add a few paragraphs of text to each cell. Use blue for the font color in the first and third rows. Use white for the font color in the second row.

7. The third column is there just to get some separation between the two newsletter ``columns.''

8. For both tables, now that you're finished, set the pixel border line width to 0.

9. How does it look? Call me over so that I can see how your tables turned out.

Questions

1. Can a cell span more than one row? More than one column?

2. What is a border?

3. What is a table caption? How do you add one? Where may it be placed?

4. What is a header cell?

5. Can you apply a color to an entire table, or must the color be applied row-by-row?

6. Can you insert a new row? A new column? A new cell?