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 #1	Heading #2
this is a regular cell	cell

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 COLUMN	SECOND COLUMN	THIRD COLUMN
regular old cell#1; no special alignment	regular old cell#2; no special alignment	regular old cell#3; no special alignment
cell#4	cell#5	cell#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 alignment	regular old cell#2; no special alignment	regular old cell#3; no special alignment
left-aligned; default	right-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#1	cell#2	cell#3
cell#4	cell#5	cell#6

This cell has height 200 pixels and width 150 pixels. Notice how it affects the entire row and column.	cell#2	cell#3
cell#3	cell#5	cell#6
cell#7	cell#8	cell#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#4	cell#5	cell#6
cell#7	cell#8	cell#9