WebTV Help Page: Tutorial:Tables

TABLES

TABLES
Tables are retangular 'spaces' on a web page which can contain

TEXT

(Graphics)

They may have a
BORDER

or

BORDER AND
CELLPADDING

and/or

BE A DIFFERENT COLOR
THAN THE BACKGROUND

and/or

BE A DIFFERENT COLOR
WITH NO BORDER
OR CELLPADDING!

and/or

Well, the list goes on and on...

You might even have a

TABLE INSIDE
A TABLE !!!

There are a LOT of possibilities... The following tutorial will show you a few basics to get you started.

ХХХХХ

FIRST
The Basic Terms
And By The Way, They're In A Table
Even Though You Can't See It

<TABLE> - This tag is there to say "Hey! There's about to be a table here!"
Inside this tag you can define:
Color (if you want any)
No Color means the background color will show through
Border (if you want any)
and
Cellpadding (if you want any)
Cellpadding creates distance between the border (or with no border, the edge of the table) and the text or graphics therein contained.

<TR> - This tag says, "Hey there is a horizontal row of content inside this table!"
There can be any number of rows (TR's) within a table, but you must close one before you open another.
<TD> - This tag says, "Hey! There is a block of 'content' inside this row!"
The 'content' can be text or graphoics and can use either as links. There can be any number of blocks (TD's) inside a row (TR) but you must close one before you open another.
NOTE THIS DIFFERENCE:
TR's in a TABLE line up underneath one another
while
TD's in a TR line up side by side.
ALSO NOTE THAT:
Within a table, every row (TR) will have
the same number of blocks (TD's).
AND THAT:
The 'Block' sizes are determined by what they contain
and
the 'Blocks' in every row will match the size of
the 'Blocks' above and below it (which are in different rows, but the same table).
(Are you totally confused yet?)

You will see of all of these things as we go through a few examples. You can copy the sample codes and paste them on your own pages to use... just change the 'block' contents to what you want to display on your own page.

and remember just like other commands/tags we discuss in other sections of this tutorial, the <TABLE>, <TR> and <TD> tags must be closed (</TD>, </TR> and </TABLE>) in the reverse order that they are opened.

Okay, Let's Go!

ХХХХХ

To Create This:

TEXT GOES HERE
MORE TEXT HERE

Use This Code:

ХХХХХ

To Create This:

TEXT GOES HERE
MORE TEXT HERE

Use This Code:

ХХХХХ

To Create This:

TEXT GOES HERE

MORE TEXT HERE

Use This Code:

ХХХХХ

To Create This:

TEXT	GOES	HERE
MORE	TEXT	HERE

Use This Code:

Two Things Should Be Noted Here:

The 'Block' sizes are equal because the words are the same length.
and
The words appear to be centered in the 'blocks' for the same reason.

Watch What Happens When We Change The Wording:

NOW WE WILL	BE	USING WORDS
OF	DIFFERENT	LENGTHS

With words (and in some cases multiple words) of varied lengths, you can see how:

The 'block' sizes are no longer of equal size
and
The 'blocks' above and below each other are the same size (based on the one with the greatest amount of 'content')
and
The content is not centered.

While it is possible to correct/change the first two cases, that involves techniques not discussed in this 'basics' tutorial. However we can center the text to create a table like this:

NOW WE WILL	BE	USING WORDS
OF	DIFFERENT	LENGTHS

By Using This Code:
Note That each 'block's' content (found between each <TD> and </TD>) is individually centered. The process must also include a closing tag for the 'center command.

ХХХХХ

A Quick Note About Opening/Closing The 'blocks' (TD's):
Remember how I said that there will always be the same number of blocks in each row? If you try to alter that, let's say by only having two in topr row & three in the second, you can't win! - You'd get something like this:

NOW WE WILL BE	USING WORDS
OF	DIFFERENT	LENGTHS

With That Said, Let's Add A Graphic!
The graphic can be added anywhere... we'll use the http://gifs123.tripod.com/webtv2.gif we've used in the other tutorials and place it in the top center 'block'...(see other tutorials for explanation of the elements of the 'IMG' command/tag)

To Create This:

NOW WE WILL BE		ADDING
IMAGES	TO THE	WORDS

Use This Code:

ХХХХХ

Now To Color The Table!
We'll use the color yellow/"#ffff00" (See other section of tutorial for discussion of color).

To Create This:

NOW WE WILL BE		ADDING
COLOR	TO THE	WORDS AND IMAGE

Use This Code:

ХХХХХ

And Finally A Table Inside A Table!

But First A Few Notes:

Remember that if you create a table inside a table you must close both tables (see code below)
If you want the outer table to be colored and have the inner table to match your original background (in this case white/"#ffffff") you must color each table... other wise the first table's color will be carried into the second table (see second example below).
While you can create a table inside a tabler inside a table inside a table... etc., some systems will only handle so many of these complicated structures, so be creative, but not too creative
and
remember as in the first note above, each table must be closed separately!

To Create This:

NOW WE HAVE		PLACED OUR
TABLE	INSIDE A	TABLE

Use This Code:

Or To Create This:

NOW WE HAVE		PLACED OUR
TABLE	INSIDE A	TABLE

Use This Code:

ХХХХХ

I hope the examples/samples above will help give you a basic understanding of tables... Now it's time to: