Web Page Tables
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.
- Open a new, blank web page in your ``scratch'' folder. Name the page
table.htm. Apply a background color to the page.
- 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
- 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.
- 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
- Use white for the row color in the first and third rows. Use blue
for the row color in the second row.
- 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.
- The third column is there just to get some separation between the two
- For both tables, now that you're finished, set the pixel border line
width to 0.
- How does it look? Call me over so that I can see how your tables
- Can a cell span more than one row? More than one column?
- What is a border?
- What is a table caption? How do you add one? Where may it
- What is a header cell?
- Can you apply a color to an entire table, or must the color be
- Can you insert a new row? A new column? A new cell?
Thomas P. Kelliher
Tue Jan 21 10:52:09 EST 1997