This page: Topic 5.

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 .

TABLES

(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )

You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!

ON THIS PAGE:
For Tables:
Basic Construction
HTML Structure
HTML Format		 Table Appearance:
Attributes
Gaining Control
Colspan & Rowspan		 Related Tips:
Getting Started (12/15/97)
Margin Spacer

NOTE (11/18/97): This page is devoted to expansion of table construction techniques.
If you are not entirely comfortable with the concepts of table application and mental visualization, or don't thoroughly understand their implications with regard to control of text and graphic placement on the web page, we suggest you review our Introduction to Tables.

(12/1/97) Frustrated with tables? There are a couple of mental "tricks" at the end of the tables introduction page that will be helpful in making tables much easier to construct.

BASIC TABLE CONSTRUCTION
Tables require a bit of study and practice, but are well worth the effort because they are the single most powerful tool for controlling page appearance! Look for a couple of "neat tricks" at the bottom of the page!

A table may have only one cell, or many. A typical table might look like:

COLUMN 1COLUMN 2COLUMN 3
ROW 1
ROW2
ROW3
CELL 1 CELL 2 CELL 3
CELL 4 CELL 5 CELL 6
CELL 7 CELL 8 CELL 9
The browser creates cells in the order shown, i.e., first row, left to right; second row, left to right; then third row, left to right - and so on for as many rows and columns as are needed. It expects to "read" your html in exactly the same order - left to right, across and down the table. You simply type the html for cell 1, then for cell 2, etc.

Here's the same table, with cells 1 and 4 combined:

COLUMN 1COLUMN 2COLUMN 3
ROW 1
ROW2
ROW3
CELL 1 CELL 2 CELL 3
CELL 5 CELL 6
CELL 7 CELL 8 CELL 9

As far as the browser is concerned, there are still 9 cells - 3 rows, and 3 columns. When you view this mentally as you write html, your entries must come in the same order for each row. For instance, in this case, you'd enter all of the info for large cell 1, then cell 2, cell 3, then leave a blank in the html for the first cell in row 2 (original cell #4) because there's no new information to place there....then go on to 5 through 9.

Tables may have borders of varying width (or none), colored backgrounds, fixed overall height/width, and other attributes which we'll cover before tackling actual constructs. In order, the following will explore basic table html tags and attribute tags, then move on to examples, methods, and tips.

HTML STRUCTURE
A TABLE is first specified with the <TABLE> tag, then a row in the table is opened with the TABLE ROW (<TR>) tag, then the contents of the row are defined for each cell with TABLE DATA (<TD>) tags. The last datacell and row are ended and a new row is begun, etc. Picture this as moving horizontally across the first row with cell information, then dropping to the next row, and so on until the table is complete. You're instructing the browser to: 1)"open a table", 2) "now open the first row in the table", 3) "..and open the first cell in the table"...then "close the datacell, close the row".

You'll tell it to open the table only once, then:

Each of the three tags must be closed with the slash convention, ie, </TD> (every cell), </TR> (every row), </TABLE> (table end.)

TABLE DATA (contents for one cell) can be any amount of text, an image, a combination of text and image, multiple images, a list, text with line breaks or paragraph tags...virtually anything you want it to be. For now, we'll stick with text.

HTML FORMAT
Browsers will not tolerate html errors in table construction . Period. The omission or misplacement of a single angle bracket or closing tag will make your page display go absolutely bonkers! The ability to edit and review your table html is a real necessity.

In your html document, poor table formatting can result in extremely difficult debugging. Since tables require so many tags to execute, it's essential to adopt a rigid format for your table html. We prefer to enter the <TABLE> tagset at the left margin, table row tagsets indented once, and table data open (only) tags indented twice, like this:

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
The indentation does nothing in the html. It is simply a visual device to help make table html easier to see and de-bug in your word processor. By aligning like tags at like indentations, it's simple to check whether each tagset is both opened and closed, and to visualize the table's structure and contents.

Let's review what the html above "says" before going on. In order by row, the html is "telling" the browser to:

  • Open a table with no border, no cellspacing, and no cellpadding
  • Open the first table row
  • Open the 1st cell in this row, enter the cellcontents1, and close the cell
  • Open the 2nd cell in this row, enter the cellcontents2, and close the cell
  • Close the first table row
  • Close the table

This is a simple table of one row, with two adjacent cells (touching each other), and looks like:

(cellcontents1) (cellcontents2)

It has no borders, isn't centered, and there's no space between cells. Pretty useless, isn't it? Well, not really. Although it has no fancy attributes yet, it's important for you to see that those two cells will always appear side-by-side, just as shown, whether the browser window is 2 feet wide or 2 inches. What's placed in a table stays in its relative position - making the table an extremely powerful tool for control of exact page layout.

Let's talk next about attributes we can add.

ATTRIBUTES
Before we explore progressive examples, let's cover a few features useful as attributes within the:
<TABLE> tag:

Font, bold, and other text attributes, plus centering and alignment must be inserted within each <TD></TD> celldata tagset - they just won't work for an entire table or row.

...and for the
<TD> table data tag:

If you wish for your table to be centered on the page, enclose the entire table in the <CENTER></CENTER> tagset.

(Changes in html and table results are highlighted with bold text in the examples which follow.)

GETTING STARTED
Once you understand the "Gaining Control" examples below, you'll be able to get started on laying out your table. Please also refer to the section "Separating the Content From The Container" on the introduction page.

First, lay out the pieces to go in your table on a piece of paper...just rough sketches will do. Identify every cell, that is, every time there is a change in alignment, background color, frame, type of content, etc., you are defining a new cell. Don't worry for the time being about how many Rowspans or Colspans there might be. Just identify all the rectangles that will contain information on the page.

Second, find the vertical path down the layout sheet with the greatest number of individual rectangles. Their sum tells you how many rows your table must have.

Third, find the horizontal path across the sheet with the greatest number of rectangles. Their sum tells you how many columns your table will have.

Finally, look at rectangles that overlap others, e.g., you might have one large rectangle at the left with three arranged vertically to its right, something like this:

   
 
 
Observe from the above that this layout results in a table that's 2 columns wide, and 3 rows tall. Column 1 (the very first datacell in the table) spans 3 rows. Remember that this is the result that arose from initially laying it out on paper!

Here's a possible overall layout on that piece of paper. Please recall that we did not know how many rows or columns there would be - we just separated all the individual pieces from one another, and let the pieces define individual datacells. Think of the lines on this example as pencil lines you drew around the pieces to go in your table:

 
     
 
 
   
You should see that the imaginary page table - that has resulted from laying out the contents in pieces - is 3 columns wide and 5 rows high. Once again, there may be as many columns and/or rows as are needed to support your layout.

You should see also that:

  1. The first (and only) cell in the first row spans 3 columns.
  2. The first cell in the second row spans 3 rows.
  3. The last cell in the second row spans 2 rows.
  4. The third row contains only one datacell.
  5. The only cell in the fourth row spans 2 columns.
  6. The first cell in the last row spans 2 columns.
  7. Row height and column width may be adjusted to fit whatever the datacells are to contain. For instance, the last row has 2 very tall datacells, each perhaps containing text, or one with text and the other with an image.
SUMMARY:
Start with the data - what's to go into each cell, and visualize each one typed as a <TD> table datacell. (That is, focus on the content before worrying about how to construct the table around it.) Then, begin to develop the table by putting two datacells together. Keep adding more cells, and add spans as needed to support the arrangement. Your table is very likely to grow from the inside out! Try not to constrain yourself by first laying out a table and then putting pieces in it - rather, lay out the pieces,and then construct the table around them.

GAINING CONTROL
Here's the html (again) for the table above:


<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>

...which looks like:

(cellcontents1) (cellcontents2)

1. Let's center this simple table by opening and closing a <CENTER> tagset:


<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:

(cellcontents1) (cellcontents2)

2. That's better-looking, but the cells are still all run together. Let's add some cellpadding ("n">0):
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=20>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:

(cellcontents1) (cellcontents2)

3. A border ("n">0) might set it off nicely:
<CENTER>
<TABLE BORDER=6 CELLSPACING=0 CELLPADDING=20>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:
(cellcontents1) (cellcontents2)

4. And a little cellspacing ("n">0) will add a cell outline and move the cells apart:
<CENTER>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=20>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:
(cellcontents1) (cellcontents2)

5. Less cellpadding will use a little less page space:
<CENTER>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:
(cellcontents1) (cellcontents2)

6. Now let's put in three sets of data per row, and add a row:
<CENTER>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
<TD>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>
[ NOTE that the first table row is ended (</TR>) before the second is started. ]
...which looks like:
(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

6b.Before we continue, let's look briefly at (optionally) controlling cell Width and Height. In the example No.6 above, we can eliminate both Cellspacing and Cellpadding to yield:
(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Now, let's add some dimensional attributes:
<CENTER>
<TABLE BORDER=6 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=36>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
<TD WIDTH=150>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>

And get this funny-looking thing:
(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

It's important that you not only see the height and width attributes at work, but that you also recognize their effects. Note that the Height attribute affected the entire first row, and the Width attribute affected the entire third column. Your choice of placement for these attributes is important.


6b. Now we're going to set Height and Width equal for all cells, and play with placement inside the cell via the ALIGN attributes (Top, Middle, Bottom, Left, Center, Right)
Here's the table with all cells at the same Height and Width:
(It looks like cellspacing and cellpadding, but it's not)
(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Now let's add some alignment attributes:
<CENTER>
<TABLE BORDER=6 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=36 WIDTH=150 ALIGN=CENTER>(cellcontents1)</TD>
<TD WIDTH=150 ALIGN=CENTER VALIGN=TOP>(cellcontents2)</TD>
<TD WIDTH=150 VALIGN=BOTTOM>(cellcontents3)</TD>
</TR>
<TR>
<TD HEIGHT=36 ALIGN=RIGHT VALIGN=BOTTOM>(cellcontents4)</TD>
<TD ALIGN=CENTER>(cellcontents5)</TD>
<TD ALIGN=RIGHT VALIGN=TOP>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>

With this result:
(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Study this html carefully. You can see that you may move the contents of any cell to any combination of top, center, bottom and left, center, right. The browser default is always center vertical and left horizontal. Whereas Height and Width will affect an entire row or column, the Alignment attributes affect only the cell in which they are placed. Observe that the attribute for vertical alignment is VALIGN, while the ALIGN attribute affects only horizontal placement.

7. Set the border to "n"=1, and the cellspacing to 0:
<CENTER>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=10>
<TR>
<TD>(cellcontents1)</TD>
<TD>(cellcontents2)</TD>
<TD>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:

(cellcontents1) (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Getting the idea? Maybe it's not so hard after all...!!

TIP: (White Space)
"White space" is defined as uncontrolled space inserted in your presentation as the result of the browser's misinterpreting line breaks in your html. Did you notice, although we nearly always start a new tag on a new line, that our data end (</TD>) tag always directly follows the last bit of data? It's essential that graphic table data lines have no line breaks (keyboard carriage return) inserted anywhere (indentation goes unnoticed). There can be no spaces between the last bit of data and the closing tag, nor can the close be entered on the next line as the result of a deliberate carriage return. White space will cause a blank area to appear around two sides of any image you set in a table. Text is also affected, but it's not as noticeable.

Here's a white space example, using this sample graphic:
Let's put this one graphic in a single table cell with this html:
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=0>
<TR>
<TD><IMG SRC="sample.gif" WIDTH=60 HEIGHT=30>
</TD>
</TR>
</TABLE>
BAD
See the open areas below and to the right of the image? That's html-induced white space, caused by the deliberate, typed-in carriage return forcing the closing </TD> to the next line (not good!).

Now fix it by simply moving the closing tag to the data line:
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=0>
<TR>
<TD><IMG SRC="sample.gif" WIDTH=60 HEIGHT=30></TD>
</TR>
</TABLE>
GOOD
With the "false" line break gone, the white space disappears. Even if the html for one datacell requires several lines in your word processor, be sure that the </TD> tag "touches" the last celldata entry, and is not placed on a line by itself.

FANCIER STUFF
8. Add lines (with breaks) to cell 1's contents:
<CENTER>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=10>
<TR>
<TD>(cellcontents1)<BR>(cellcontents1a)<BR> (cellcontents1b)</TD>
<TD>(cellcontents2)</TD>
<TD>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:

(cellcontents1)
(cellcontents1a)
(cellcontents1b)		 (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)
You can see that the number of TABLE DATA cells in a row defines table width, and that the number of rows defines table height. The largest cell will determine size for an entire row (height) or column (width.)

COLSPAN and ROWSPAN
Let's say you want to include a caption row above the table. Once you've entered more than one column anywhere in the table, then the computer will show and outline all of those columns, even if you don't enter cell data for all of them.

9. For example, let's simply add a row with one defined cell above the last example (and replace the border and cellspacing):
<CENTER>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10>
<TR>
<TD>CAPTION</TD>
</TR>
<TR>
<TD>(cellcontents1)<BR>(cellcontents1a)<BR> (cellcontents1b)</TD>
<TD>(cellcontents2)</TD>
<TD>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>
...which looks like:

CAPTION
(cellcontents1)
(cellcontents1a)
(cellcontents1b)		 (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Oooops....

10. Ratz...what we really want is for the caption to SPAN the distance across all three columns. The proper attribute is <COLSPAN="n">, where "n" is the number of columns to span. Let's go for three columns:
<CENTER>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=10>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>CAPTION</TD>
</TR>
<TR>
<TD>(cellcontents1)<BR>(cellcontents1a)<BR>(cellcontents1b )</TD>
<TD>(cellcontents2)</TD>
<TD>(cellcontents3)</TD>
</TR>
<TR>
<TD>(cellcontents4)</TD>
<TD>(cellcontents5)</TD>
<TD>(cellcontents6)</TD>
</TR>
</TABLE>
</CENTER>
NOTE the addition of "ALIGN=CENTER" (choices are left, center, right), which causes the caption to be centered above the three columns, and that the attribute addition is included within the brackets of the <TD> tagset.

It now looks like:

CAPTION
(cellcontents1)
(cellcontents1a)
(cellcontents1b)		 (cellcontents2) (cellcontents3)
(cellcontents4) (cellcontents5) (cellcontents6)

Use your imagination and experiment to discover that: you may insert a span anywhere in the table, and it may span any number of columns you choose. You may have one "normal" data cell plus several spanned in the same row, or any combination of spans required.

The ROWSPAN (see item 12, below) tag works the same way to create vertical spans. With rowspans, remember that the first thing seen is the upper right cell: if you wish for the first cell to span several rows, then the very first cell in the first row must specify the span. Just follow your nose from left to right and top to bottom and pretend you're the computer scanning the table...whatever it sees next is what you should program next. Keep overall table width below 750 pixels to allow viewing without left-right tabs on smaller monitors.

11. Let's put a table inside a centered table. The main table has a border of 6 pixels, the inner table a border of 3, and each table has two data cells, like this:

This is the second data cell in the inner table.
This is the second data cell in the main table.

Here's the html, explained below:

<CENTER>
<TABLE BORDER=6 CELLSPACING=3 CELLPADDING=12>
<TR>
<TD><TABLE BORDER=3 CELLSPACING=3>
<TR>
<TD><IMG SRC="sample.gif"></TD>
<TD WIDTH=150>This is the second data cell in the inner table.</TD>
<TR>
</TABLE></TD>
<TD WIDTH=150>This is the second data cell in the main table.</TD>
</TR>
</TABLE>
</CENTER>

    Explanation and discussion:
  • It would be nearly impossible to read or debug this html if it were not indented.
  • The second table is contained entirely within the <TD></TD> tagset for the first data cell in the main table. All of its ROW and DATA tagsets are indented even further so they're easily found during debugging.
  • You may control the size of a table cell by adding height or width attributes in the data tag. See the illustration at 150 pixels, which is used to control overall width and appearance. In our case, it forces a single line of text to wrap to two lines within the cell.
  • You may place nearly any legitimate html within a table cell, including a graphic, text, hypertext links, etc.
  • The graphic is not tall enough to support the inner text block. There's no white space around the graphic, but it's not large enough to fill the vertical space forced by the text in the second cell. To cope with this, you must experiment with choice of words to get the text exactly as you want it, then size the graphic to be slightly larger.
Just for fun, here's that same table html with no indentation:
<CENTER>
<TABLE BORDER=6 CELLSPACING=3 CELLPADDING=12>
<TR>
<TD><TABLE BORDER=3 CELLSPACING=3>
<TR>
<TD><IMG SRC="sample.gif"></TD>
<TD WIDTH=150>This is the second data cell in the inner table.</TD>
<TR>
</TABLE></TD>
<TD WIDTH=150>This is the second data cell in the main table.</TD>
</TR>
</TABLE>
</CENTER> ...gets a little hard to read, doesn't it?

As the final example of the rationale behind our plea for rigid html structure, here's that table html with no structure of any kind:
<CENTER><TABLE BORDER=6 CELLSPACING=3 CELLPADDING=12><TR><TD><TABLE BORDER=3 CELLSPACING=3> <TR<TD><IMG SRC="sample.gif"></TD><TD WIDTH=150>This is the second data cell in the inner table.</TD><TR></TABLE></TD><TD WIDTH=150>This is the second data cell in the main table.</TD></TR></TABLE></CENTER>

It contains an error which will make a mess of everything following it on the browser page...can you find it? (If you try, you'll see that it would "stick out like a sore thumb" if the indented structure had been used!)

12. ROWSPAN SAMPLES
Both of these samples are based on the 9-cell tables found at the top of this page. Their purpose is to illustrate construction of vertical table data cell combinations using the principle of writing table html "from left to right" as each cell is encountered.

12-A:
A table with the entire center column as one cell. In "reading" across and down, the first center cell encountered is Cell 2, where we'll place the ROWSPAN attribute. In the html for the center column (Cells 2, 5, & 8), notice that there is an entry only for Cell 2. Its ROWSPAN attribute automatically "fills" cells 5 & 8 by combining them with cell 2.

The table:The HTML:
(cell 1) (cell 2) (cell 3)
(cell 4) (cell 6)
(cell 7) (cell 9)
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=6>
<TR>
<TD>(cell 1)</TD>
<TD ROWSPAN=3>(cell 2)</TD>
<TD>(cell 3)</TD>
</TR>
<TR>
<TD>(cell 4)</TD>
<TD>(cell 6)</TD>
</TR>
<TR>
<TD>(cell 7)</TD>
<TD>(cell 9)</TD>
</TR>
</TABLE>
12-B:
A table with the top row as individual cells, and the last two center column cells as one cell. In "reading" across and down, the first center cell encountered is Cell 2, which we'll specify in html. The next center column cell is Cell 5, where we'll place the ROWSPAN attribute. In the html for the center column (Cells 2, 5 & 8), notice that there is an entry only for Cells 2 & 5. Cell 5's ROWSPAN attribute automatically "fills" cell 8 by combining it with cell 5. Compare the html with that for sample 12-A.

The table:The HTML:
(cell 1) (cell 2) (cell 3)
(cell 4) (cell 5) (cell 6)
(cell 7) (cell 9)
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=6>
<TR>
<TD>(cell 1)</TD>
<TD>(cell 2)</TD>
<TD>(cell 3)</TD>
</TR>
<TR>
<TD>(cell 4)</TD>
<TD ROWSPAN=2>(cell 5)</TD>
<TD>(cell 6)</TD>
</TR>
<TR>
<TD>(cell 7)</TD>
<TD>(cell 9)</TD>
</TR>
</TABLE>
If you're feeling adventuresome, use View_Frame_Source to examine the html for these two examples. The entirety of these samples is in one large, complex table. Each of the sample tables is contained within a single cell of the parent table, and each html list is within a single cell of the parent. The use of ASCII characters is amply illustrated in the "coding" for the html examples accompanying each of the tables, as is the multiple use of the break <BR> tag within a single table cell. This paragraph is in the final row of the parent table, and in a cell spanning two columns.

14. A TRICK FOR LEFT MARGIN SPACING
This is useful for indenting small portions of your page:
This entire paragraph is set 120 pixels from the left margin. It's actually in a one-row table with two data cells. The first cell is a dummy blank with a width specification, and the text is in the second!
Here's what the html looks like:
<TABLE>
<TR>
<TD WIDTH=120></TD>
<TD>(Paragraph text.)</TD>
</TR>
</TABLE>
Note the 120 pixel width spec in the first (empty) table cell. With a ROWSPAN value, this could offset an entire group of rows in a table.
The blank cell may also (or alternatively) be given a HEIGHT value.

CAUTION:
The blank table cell can cause difficulties in many situations, and you must know what to expect. If it fails to perform as expected, the solution is to install a blank.gif in the cell, with appropriate HSPACE and VSPACE attributes. The subject is expanded in the HTML Basics Page at the Related Tips section.

[ home ]

Wow! You've come a long way! Now that you understand and have really practiced all of this, you're ready to go out on the 'net and show 'em some really fancy table stuff.

The beauty of a table is that you can place whatever you want exactly where you want it on your page and never worry about the browser's natural tendency to wrap text or otherwise distort your presentation.

Good luck, and HAVE FUN!

[ home ]