BESS' SPRING 2003 WEB DESIGN CLASSES

HTML 1 - WEEK FOUR


"CREATING TABLES AND
ADDING SOUND TO YOUR WEB PAGE"

The horizontal rule just above this text is centered and set to show a 600 pixel length line.
Tables set no wider should accommodate most monitor sizes and prevent the tables from
breaking naturally. However, since the following tables are centered, not aligned left,
I'm not sure how this will work so it will be interesting to see how the tables break
and appear on various sized monitors.

Samples of Table Types



1. Simple Table...NO Borders

Product Name and Description Price Per Unit Units Available
Blouse - red silk $39.95 150
Pants - black cotton $57.98 300

2. Simple Table...WITH Borders

Product Name and Description Price Per Unit Units Available
Blouse - red silk $39.95 150
Pants - black cotton $57.98 300

3. Columns...no spaces, no width

To use a table to display columns, create a table with one row that contains a cell for each column you want to display. Each cell should contain the information for one column. For example, you can display three columns of text or an image beside two columns of text. When you display your Web page in a Web browser, the information will appear in columns. The width of the columns will depend on the size of the Web browser window.

3A. Columns...no spaces, WITH WIDTH

To use a table to display columns, create a table with one row that contains a cell for each column you want to display. Each cell should contain the information for one column. For example, you can display three columns of text or an image beside two columns of text. When you display your Web page in a Web browser, the information will appear in columns. The width of the columns will depend on the size of the Web browser window.

4. Captions, Borders, Color, Background

UPCOMING EVENTS
Date Event Time Location Expected #
June 21 Opening Ceremonies 9:00 a.m. - 11:30 a.m. Skylight Stadium 5,000
June 21 Dinner for Participants 6:00 p.m. - 8:00 p.m. Banquet Hall 200
June 22 Sporting Events 9:00 a.m. - 5:00 p.m. Skylight Stadium 2,500
June 23 Awards Presentations 11:00 a.m. - 1:30 p.m. College Arena 1,000
June 23 Buffet Dinner 5:00 p.m. - 6:30 p.m. Banquet Hall 200
June 23 Closing Ceremonies 8:00 p.m. - 9:00 p.m. Riverside Park 4,000

5. Borders, Row Span, Align Horizontal "right"

Sierra Fashions Product Name and Description Price Per Unit Units Available
Blouse - red silk $39.95 150
Pants - black cotton $57.98 300

6. Borders, Row Span, Align Vertical "top"

Sierra Fashions Product Name and Description Price Per Unit Units Available
Blouse - red silk $39.95 150
Pants - black cotton $57.98 300

7. Change Size of Cells in Table by Percentage

Date Event Time Location Expected Turnout
June 21 Opening Ceremonies 9:00 a.m. - 11:30 a.m. Skylight Stadium 5,000
June 21 Dinner for Participants 6:00 p.m. - 8:00 p.m. Banquet Hall 200

8. Borders, Column Span

New Spring Line
Product Name and Description Price Per Unit Units Available
Blouse - red silk $39.95 150
Pants - black cotton $57.98 300

9. Borders, Span Across & Down Rows, Font

Schedule Othello Hamlet Julius Caesar
Preview To Be Announced Aug.28, 2003
Opening Night Sep.30, 2003

10. Borders, Cell Spacing

McKenzie Fashions Inc.
Products Code Category Price Units Available
01-468 Fall $75.00 1068
01-469 Fall $15.00 1700
01-470 Summer $95.00 2500
01-471 Spring $120.00 3200

11. Borders, Cell Padding

McKenzie Fashions Inc.
Products Code Category Price Units Available
01-468 Fall $75.00 1068
01-469 Fall $15.00 1700
01-470 Summer $95.00 2500
01-471 Spring $120.00 3200

12. No Borders, Seamless Images (not wrong now!)

red tile
red walkway

1. This Web page includes a two-column table that has table border, cellspacing and cellpadding all set at "0" thereby making the two images appear seamless...well, it did the first time but the text was all smashed up against the image, so how to fix? I added cell spacing and padding, blank spaces before text, changed the size of the text cell, removed image dimensions... all to no avail.

2. Now everything is back as it was except for the WIDTH of the image which cured the smashed text. However there is a new problem, the thumbnail is no longer up against the red bar at the top. HOW IS THAT FIXED?? Also, these lines of text are all spaced with my trusty <BR>s (again!). HELP...none of this is right, right? What am I not seeing?

3. Next installment...Eagle said to add VALIGN to the image <TD> to move it up to the top (still not seamless with the bar, however, but oodles better!), put back the image attributes in and take out all the line <BR>s and this is the result. Thanks!!!

4. Oh, Eagle discovered a stray ">" that was preventing the image and the bar from meeting as mentioned above and now that's fixed. All by myself (so proud!) I've found TABLE WIDTH brought the right side back in closer. I also tried ALIGN with "justify" in this text area but the right margin is still ragged so something isn't working there. Too bad!

5. The ALIGN attribute should be in the opening <P ALIGN="justify">, not in the opening <TD> as I had it, so now everything is lined up!

13. Wrap Text Around a Table

The Jazz Kings' Biography

Record Name Year Produced
Midnight Jazz 1994
Summer Songs 1996
Live in Concert 1998
Best Hits 2000

The Jazz Kings burst onto the music scene in 1994 with their debut
album entiled Midnight Jazz. Since then, the band has been gaining
popularity throughout the United States.

The band consists of five talented musicans who met in New Orleans
in 1991. Since then they have produced four albums and have toured
throughout the United States and Europe. Although their albums are
great, the band really must be seen live to be truly appreciated.

The Jazz Kings play with a great deal of energy, and the audience is always dancing in unison by the end of the first song! Whether they're playing a small club, or a large stadium, the band is always at their best when on stage.

Depending on the website, some might possibly be enhanced by music, e.g., dream analysis, poetry, fanciful or upbeat, "hip" topics, etc. On the other hand, music is generally inappropriate for business sites unless, perhaps, the music is specific and meaningful to the site. Furthermore, some people could be startled, or even embarrassed if they are at work, by unexpected music.

I believe most people are irritated by music not of their choosing, especially a repetitious loop while they are trying to view the information on their screen. The worst scenario is a page with automatic music to which the viewer must return repeatedly, only to to met with the same tune over and over again and no way to turn it off! <BGSOUND SRC="entertanr.mid"> To hear "The Entertainer," press start; to turn it off, press stop.



VU SPRING 2003 MAIN TOE

WEEK ONE EXERCISE

WEEK TWO EXERCISE

WEEK THREE EXERCISE

WEEK FIVE EXERCISE

EXTRAS

Back to Top