Lab 5 - Tables Sampler

A Basic Table

R2D2Luke
CP30Leia

Table without Border

One Two three
four   five

Table with Border of 10 plus a blank space in second row

Internet Internet Internet
Internet Internet

Table with Border of 5 plus a nonbreaking space in the second row

Internet Internet Internet
Internet   Internet

Top Headers:

Cardinals Giants Cubs Mariners Reds Royals
W W L W L W
L L W L W W

Side Headers:

Cats Felix Tom
Dogs Thisbe Fettucimi
Birds Fenetre Tweedy

Cellpadding/Cellspacing

A

A B C
D E F

B

Sunday Monday Tuesday
Wednesday Thursday Friday

C

1 2 3
4 5 6

D

1 2 3
4 5 6

Alignment

Left Right and Center

Eighteenth Century Nineteenth Century Twentieth Century
**centered** middle !!wow!!
Far Right Far Out! (default)
Far Left

Valign VERY important to know!

Top Center Bottom
Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top Aligned to the top center bottom

Colspan

Mon. In In In In In In
Wed. Vacation

Rowspan

Characters Darth Chewbacca
Jawas Han
Luke Leia

Multiple Headers & Colspan

Mom Dad
Buffy Xena Megan Felicity Ben
X Y Y O W
E F G O W

Rowspan, Colspan and Headers

Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002

Table Widths

60% of screen width

Three Seven
One Two

70% with unequal cell values

lots of words in this side Y
Y Z

100% of screen

Nancy Ned
Bess George

centered on screen

Top Row Left Top Row Right
One Two

50% Width and Nested Table Inside

Education Employment
Undergraduate Graduate
1998 1999
2000 2001
None

Varied (100% width) and Nested with Fonts and Colors

Navigation

Home

Training

Products

Schedule of Classes

City Class Time
Menlo Park Flash 8:30
Redwood City Fireworks 10:30
San Diego Fourth of July 11:00
Cupertino HTML 9:00

More info can go here.
Coming
Attractions

Other
Stuff

Other
Stuff

Other
Stuff

City Class Time
Chicago HTML 8:30
Sarasota Director 10:30
San Francisco Photoshop 11:00
Paris HTML 9:00

Alignment Result
Left red windmillThis positions the image at the left side, with text flowing around it on the right. This positions the image at the left side, with text flowing around it on the right.
Right red windmillThis positions the image at the right side, with text flowing around it on the left. This positions the image at the right side, with text flowing around it on the left.
Bottom red windmillHere, the image runs into the paragraph and the line containing the image is aligned with the image bottom. Here, the image runs into the paragraph and the line containing the image is aligned with the image bottom.