SURFING IN THE DARK ...A Beginner's Odyssey
	1. INTRO, RESOURCES, TOOLS	2. HTML BASICS	5. TABLES	8. JAVA SCRIPT
		3. APPLYING HYPERTEXT	6. GRAPHICS	9. MIDI MUSIC
		4. COLOR	7.COUNTERS	.

OFFSET TABLE FOR BORDERED BACKGROUND

(You must examine the Source HTML to understand these examples.)

Please refer to the tables tutorials to learn basic table construction.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
BEGIN BASIC OFFSET MODEL:

Offset

This is the content cell #2. Vary browser width, and it always lines up right. The width for this cell is always set at "100%" This cell must contain all of the HTML content for a "normal" page, eg., one without a border background.

For the offset blank value, you must set the overall table border at 1, make BGCOLOR a visible contrast to your border image, set the second cell width at 100%, then play with the HSPACE value until the left cell just covers the width of the border.

END, BASIC OFFSET MODEL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

COMPLEX OFFSET MODEL
CONSTRUCTION EXAMPLES
Whatever might go on a standard borderless bg must be placed within the second <TD>, including tables, etc.

For this example, all table borders are set at 1.
Experiment with effects by setting border to other values, including zero.

Vary browser width and see the table retain its appearance.

Note that all to the right is one huge table to the right of the offset. In practice, you'd break this as needed into several similar tables down the page to speed text download. In general, images take the longest time to download. A large table of text only will download very quickly.

Note that the COLSPAN attribute is not required, because any multi-column row is contained within its own nested table. If you do not use the nested approach, then a COLSPAN attribute will be required if multiple columns are used.

Offset

This is the first row in the content cell table. Vary browser width, and it always lines up right. Below is an image cell with a border. This is an interesting addition of text beneath a framed image. Note that the text falls within the parent TD, but not within the nested table. Here's a large single cell with lots of text lines, all centered. It's not as efficient as the example above (though it looks the same) because it requires more HTML entry. Nested table, cell No1. Centered Note the width spec. Nested table, cell No2. Center not specified. (No addtl width spec required.) For this new table, we spec 2 cells at 30%, and the third automatically assumes it's 40% with no spec. Specifed at 30%. Breaks long text as needed to get it all in the available width. Defaults to 40% width.