Bill's Playscript Library
Web TV Tutorial
Tables
 WebTv Gif


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

or
WebTv Gif

(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
  1. <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.
  2. <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.
  3. <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:
TEXTGOESHERE
MORETEXTHERE


Use This Code:


Two Things Should Be Noted Here:

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


Watch What Happens When We Change The Wording:

NOW
WE WILL		BEUSING
WORDS
OFDIFFERENTLENGTHS


With words (and in some cases multiple words) of varied lengths, you can see how:
  1. The 'block' sizes are no longer of equal size
    and
  2. The 'blocks' above and below each other are the same size (based on the one with the greatest amount of 'content')
    and
  3. 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
Web TV gif
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
Web TV gif
ADDING
COLOR
TO THE
WORDS
AND IMAGE


Use This Code:




•••••

And Finally A Table Inside A Table!

But First A Few Notes:
  1. Remember that if you create a table inside a table you must close both tables (see code below)
  2. 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).
  3. 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
Web TV gif
PLACED
OUR
TABLE
INSIDE A
TABLE


Use This Code:


Or To Create This:
NOW
WE HAVE
Web TV gif
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:
RETURN TO WEBTV TUTORIAL MAIN PAGE