TABLE WORKSHEET #2, LESSON 34

Please write the code to produce the following tables.

Use <TH> instead of <TD> to get HEADINGS (which will automatically appear bold and centered):
Heading #1Heading #2
this is a regular cellcell


Some practice with ALIGNMENT.
First, HORIZONTAL ALIGNMENT:

ALIGN="left" (which is the default)
ALIGN="right"
ALIGN="center"
If you want an ENTIRE ROW aligned the same way, put the code in the <TR> tag:
FIRST COLUMNSECOND COLUMNTHIRD COLUMN
regular old cell#1; no special alignmentregular old cell#2; no special alignmentregular old cell#3; no special alignment
cell#4cell#5cell#6


However, if you want individual cells in the same row to be treated differently, then you must put the code in the <TD> tags:
regular old cell#1; no special alignmentregular old cell#2; no special alignmentregular old cell#3; no special alignment
left-aligned; defaultright-aligned centered


You might THINK that if you want an ENTIRE TABLE aligned the same way, then you could put the code in the <TABLE> tag. TRY IT OUT for centering and right-aligning. Does it work? If not, what happens instead? Try it in BOTH major browsers to see if there is a difference in the behavior.



Next, VERTICAL ALIGNMENT:
VALIGN="bottom"
VALIGN="middle" (which is the default)
VALIGN="top"

If you want
an entire row
vertically aligned
a certain way,
then put the VALIGN tag
in the <TR> tag.
Put <BR> tags
in your code
to get exactly
the same line-breaks
as you see here.
This should be top-aligned. Is it?
If you want
an entire row
vertically aligned
a certain way,
then put the VALIGN tag
in the <TR> tag.
Put <BR> tags
in your code
to get exactly
the same line-breaks
as you see here.
This should be middle-aligned (which is the default). Is it?
If you want
an entire row
vertically aligned
a certain way,
then put the VALIGN tag
in the <TR> tag.
Put <BR> tags
in your code
to get exactly
the same line-breaks
as you see here.
This should be bottom-aligned. Is it?



You can set the HEIGHT and WIDTH to be a certain number of pixels, or a certain percentage of the browser window. Be sure to re-size the window on these examples and see what changes, and what doesn't!

WIDTH=50%, HEIGHT=100%, in the TABLE tag
cell#1cell#2cell#3
cell#4cell#5cell#6


This cell has height 200 pixels and width 150 pixels. Notice how it affects the entire row and column. cell#2cell#3
cell#3cell#5cell#6
cell#7cell#8cell#9


This cell has width 15% of the browser window. This cell has width 50% of the browser window. This cell has whatever width is left over!
cell#4cell#5cell#6
cell#7cell#8cell#9