<table width="100%" height="385" bgcolor="#000000" cellpadding="10" cellspacing="0"> <tr><td align="center"> <img src="images/webtvbug2.gif" height="100" width="300" border="0" alt="webtvbug"> <p> <font size="6" color="#A10000" effect="emboss"> <b><i>You have the Webtv Bug, you must reload this page by holding down the cmd key on your keyboard and pressing the letter R key 7 times. The Webtv Bug prevents webpages that use javascript from functioning properly. <br> Thank you "Kid"</i></b></font> </table>
The_Club_house

CLICK HERE TO ENLARGE THE TEXT OF THIS PAGE

TABLES (The Basics)

Since this tute was made some things have changed with the W3C rules. They now state that the height has been depreciated, so you shoulde no longer put in. Just the width, and the height will adjust itself. I think this was made for PC user's though because they have higher browser's than the webtv unit. So you can leave the height out if you wish. But if it just won't fit for you webtv user's, go ahead and put the height in. PC user's will still see the height you put in. It will just come out as an error if you validate it using the W3C validator.

Ok, fist of all tables can bet complicated, but if you practice they will come easier and you will be amazed at what you can make and do with tables. Most of the professionally made pages you see start with HTML and then go to tables. I'll try and teach you the basics and put more in as time allow's, here we go.

THE TABLE TAGS

First, here's the tags, there meaning's.

<table> This is the table tag, it starts out the table code and let's the computer know that more table codes are coming.It closes it with </table>.

<tr> Table row tag, it starts a new set of cells, closes with </tr>

<td> Table data tag, you info goes here, closes with </td>.

<th> Table heading tag, it puts a heading in your table cell, automatically puts it in bold print and center's it, it closes with </th>.

Rowspan, makes a large table cell vertically.

Colspan, makes a large table cell horzontally.

Align="center" or "left" or "right". Puts the info to the left, center, or right.

valign="middle" or "top" or "bottom". Puts the info on the top, middle, or bottom.

<P align="center", "left" or "right">. Puts a paragraph to the left, center, or right, a </p> closes it.

<div align="center", "left" or "right">, Puts the info wether it be a table or paragraph to the center, left or right, a </div> closes it. WEBTV/MSNTV user's should use this tag instead of the <center> tag, especially if there using the WEBTV/MSNTV PAGEBUILDER. This tag as I understand it will be the only one that will center things on there, since they add tables without your knowledge.

ADDING SPACES

These work with PC Internet Explorer user's and Webtv user's, I don't believe they work with Netscape user's though. The first one can be use to add a height and width space, it's called a spacer type block, and the codes go like this.

This is probably the most common one in use, just replace the ? mark with a number or % to make the space's you want, the bigger the number the bigger the space.

The next one is called, spacer type vertical, it will give you a space vertically, there are 2 codes and they go like this.

Again you can replace the ? mark with a number or %, the bigger the number the bigger the space.

The third is spacer type horizontal, and the code goes like this.

Again replace the ? mark with a number or %, the bigger the number, the bigger the space.

PC and Webtv user's can also use a blank gif, or clear gif to make there spaces. Here's one for you to use, click here. The advantage of using a spacer.gif is it will be seen, or useable by all browsers. All you have to do is install it in the table tag like this:

You can make it any size you want and nobody will see it, only a space where you need it.

Tables work in cells, you can have one cell or as many as your page can hold. Or some pages don't use cell's to say, they put in <p align="center" "left" or "right"> with a </p> to close it. These tags are used for paragraphs.

THE BASIC TABLE

Here is your basic table cell and code for it.

cell

Here's the code:

Where it say's "cell" you can put any info you want, even an image.

Here's an example using all 3 directions and 3 cells.

"left"

"center"

"right"

Here's the code for this group of cells.

<center>
<table bgcolor="#000000" border="1"
cellspacing="1" cellpadding="1" height="70"
width="300">
<tr>
<td align="left">"left"</td>
<td align="center">"center"</td>
<td align="right">'"right"</td></tr>
</table>
</center>

<valign="top" or "middle" or "bottom"> This tells where the info in the table cell goes to, only on the top, middle or bottom.

Here's an example using the 3 directions and 3 cells.

"top"

"middle"

"bottom"

Here's the code:

<center>
<table bgcolor="#000000" border="1" cellspacing="1"
cellpadding="1" height="70" width="300">
<tr>
<td valign="top">"top"</td>
<td valign="middle">"middle"</td>
<td valign="bottom">"bottom"</td>
</tr></table>
</center>

Here's an example of using both align="?", and valign="?" together in the table cell.

"top"

"middle"

"bottom"

And here's the code for it.
<center>
<table bgcolor="#000000" or "black"
border="1" cellspacing="1" cellpadding="1" height="70" width="300>
<tr>
<td align="center" valign="top>"top"</td><td align="center"
valign="middle">"middle"</td><td align="center"
valign="bottom">"bottom"</td></tr> </table>
</center>

Ok, on this example you probalby noticed some new tags. The bgcolor= is the color you want your table in hex colors - #?????? or in word colors. You could also use a background if you wish, background="address. The border is how big you want the border to be around your table, the bigger the number - the bigger the border. A border="0" will give you no border at all.

Cellspacing is the space between the table cells, again the bigger the number, the more space there will be.

Cellpadding, this is how much you want the letter's or pic's inside your table cell to look sunken in, or in other words the bigger the number, the larger the space between the cell info and the border.

I also added height and width to the table, this will make as high and wide as you want, this can go by pixels (numbers), or in percentages-%. I put the <center> tags before and after the table to center it on the page.

There is also rowspan, this goes by rows or cells, "vertically", up and down. colspan this will go by cell's "horizontally" or sideway's.

Just rememeber when you end your cell you need to use a </td> and start a new one with <td the rest> And if you want to start a new row of table cells you put a </td></tr> and right aftwards put a <tr><td> the rest</td></tr>

ROWSPAN

Here's an example using rowspan on the side of the other 3 cells. If there were 4 cells on the right side. the rowspan would be 4, and so on and so on.

Cell 1	cell 2
	cell 3
	cell 4

Here's the code:

COLSPAN

Here's an example using colspan on the top of the other 3 cells. As above in rowspan, if the bottom row had 4 cells the colspan would be 4, and so on and so on.

Cell one
cell two	cell three	cell four

Here's the code for this group of tables cells

<center>
<table bgcolor="#000000" border="1" cellspacing="1" cellpadding="1" height=100" width="300">
<tr><td colspan="3" align="center"> Cell one</td> </tr>
<tr><td align="center">cell two</td>
<td align="center">cell three</td>
<td align="center">cell four</td></tr>
</table>
</center>

On this group of cells I added a cell on top, also "30" on the height to acçomodate the new cell, and notice I put the colspan="3" on the <td colspan="3" top cell, the colspan will go over the other "3" cells this way. If it would've been a colspan of only 2 it would've gone over only 2 of the cells.

Here's a the same group with 2 more cells added at the bottom, notice no border on the 2 at the bottom.

Cell 1

cell 2

cell 3

cell 4

cell 5

cell 6

Here's the code:

NESTING A TABLE

Nesting a table is nothting more than putting a table inside a table, and so on and so on. You can put a bgcolor on your <td ailign="center" bgcolor="?"> or <td align="center" body background="address of image"> if you want a background image for a border. You can see an example of this further down the page. Put the information you want in the middle, or a picture.

This table uses 80% for the first table for the width, you can add hieght to the code if you want, you can use a higher number or lower, depending on how big you want your table to be. The table will adjust if you have a picture in the middle. The other table's, the one's inside the first are at 100% to make it fill the space totally. The cellpadding on this table is 20, you can make it bigger or smaller, the bigger the number, the more space between the table border's, the smaller the number, the smaller the border between the table border's.

The more table's you add to the The more </tr></td></table>'s you will need at the bottom. If you have 3 table's you will need 3 </tables> on the bottom, the same amount that you used on top.

Information or picture here.

Here's the code:

<center>
<table width="80%" cellpadding="20"cellspacing="0" border="1">
<tr>
<td align="center">
<table width="100%" cellpadding="20" cellspacing="0" border="1">
<tr>
<td align="center">
<table width="100%" cellpadding="20" cellspacing="0" border="1">
<tr>
<td align="center">
Information or picture here.
</td></tr></table>
</td></tr></table>
</td></tr></table>

TABLE LINKS MENU

Here's a table with and image and links to make a table links menu. Please notice the exammple of how to use the <th> or table heading tag. This example will show you how to use it to align an image for the heading.


Real audio	Midi's	Wav's
Help Sites	Graphics	Games
Karaoke	Postcards	Email Help

Here's the code:

You can change the size of the banner image, the table will change to fit it. If you don't want to use a banner you can use your <table heading tags, <th>Title here</th>
Add your own addresses and name of the links. you can add more link by adding a <tr> and more <td align="center>'s, as many as suit's your needs. You can also add more colspans to make 4 row's or more if you want more links on the row

Here's one without a banner. This one is used alot on what they call "F" key saver's for webtv user's.

PICK YOUR DESTINATION
Real audio	Midi's	Wav's
Help Sites	Graphics	Games
Karaoke	Postcards	Email Help

Here's the code:

<center>
<table border="10" cellspacing="10"
cellpadding="5">
<tr>
<th colspan="3">PICK YOUR DESTINATION</th>
</tr>
<tr>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
</tr>
<tr>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
</tr>
<tr>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
<td align="center"><a href="http://"address
here">name here</a></td>
</tr></table>
</center>

Here's an example of how to table your link, you can also see this on my awards page. You can leave out the fonts if you want, I just put them in so your could see that you can use them and they can be helpfull. The table href is a webtv ONLY thing though. PC user's won't be able to see it or use it.

TABLE BANNER'S

Click Here To

Enter My Site

Here's the code:

<center>
<table href="address of your site"
border="?" cellspacing="?" cellpadding="?"
bgcolor="?">
<tr>
<td align="center"><font size="1" color="#FFFF00">Click Here To</font><BR>
<img src="banner address here" height="?" width="?" alt="Banner"><BR>
<font size="1" color="#FFFF00">EnterMySite
</font><BR>
</td>
</tr>
</table>
</center>

TABLE BORDER AND IMAGES

Table border color's can be seen by PC user's, but you must use Hex number values for them to see it, and use - BORDERCOLOR="hex color". Like silver would be "#C0C0C0", if you use "silver" a PC user wouldn't see it. If you were to use a color like RED, the hex would be "#FF0000". But you can also use a BORDERCOLORLIGHT="#FF0000" for light RED, or BORDERCOLORDARK="#FF0000". Here's an example with a table border using color and an image. Just remember, if you want PC user's to see the border color you must add the bordercolor code. Here's an example of a table using both codes for PC user's and webtv user's. First here's the code for PC user's and the color is deepskyblue or "#00bfff".

Here's the code for this table image:

Here's an example of the same table with just a webtv border:

Here's the code for this table image:

And here's an example of both in a table:

And here's the code for it:

TABLE IMAGE BACKGROUND AND IMAGE

The table background as a border is a webtv only thing too, PC user's won't be able to see it. Here's an example with the same image and table, with a background border:

Here's the code:

TALBE'S, IMAGES AND WORDS

Here's an example of a table using an image background and words in the middle.

Are We Alone?

And here's the code for it:

<center>
<table background="http://wtv-zone.com/TheKid/images/space.gif" border="1" cellspacing="1" cellpadding="1" width="200" height="200">
<tr>
<td align="center><font size="4 color="#FFFFFF">Are We Alone?</font>
</td>
</tr>
</table>
</center>
Here's an example of using an image as a table background and an image inside the table, an image on an image.

And here's the code for it:

Here's an example of tables with words along side.

UFO's The truth is out there.

Here's the code:

<center>
<table border="1" cellspacing="1" cellpadding="1" bgcolor=#000000" height="100" width="275">
<tr>
<td align="center" width="100" height="100"> <img src="http://wtv-zone.com/TheKid/pictures/ufopic.gif" height="100" width="100">
</td>
<td align="center" width="175" height="100">UFO's The truth is out there.</td>
</tr>
</table>
</center>

Here's the same table and image with the border="0".

UFO's The truth is out there.

You can also change the color of the border, and change the color of the middle or bg color on the right side. Like this "on the right side". <td align="center" bgcolor="white">, the words "UFO's the truth is out there" will be put on a white background. If you want to change the color of the words you can use <font color="?">words here</font>. You can also replace the border with a bigger number and put a bgcolor on it and it will show.

UFO's The truth is out there.

Can you make the table code for this one? I gave you all the informaton you need. Give it a try, it will be good practice.

To move on to my page on gradcolor's and gradangle's click here. (webtv only)

Practice with these simple table's, you can practice here. Kid

Questions? Click here.

Please Sign My Guestbook