Make your own free website on Tripod.com
Draac's Tables School


Draac's Tables School

Updated Jan. 17, 1998
Please Reload These Pages,
To Assure The Most Recent Version.

Now 18 Lessons !!!!

Here Are A Few Table Tags
For You To Experiment With.
There Is Much More To Tables
Than You Will Find Here.
I Hope This Will Get You Started Though..:+)


Need A Quick Answer To A HTML Question ?
Try The HTML Newsgroup.
The People In This Group Can Answer
Any HTML Question You May Have.
Sorry Computer Users, It's A Webtv Only Group.



Click On A Button For Some Music
To Listen To While You Learn !

Jazz

Country

Classical



Lesson 1 - A Color Table Border.

Here is a simple table border around an image.
You can have these borders in any color you wish.


Here is the code I use to do that.
Please add your own image address
to this sample:

<table bgcolor="blue" border="7">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>

Note: you can fool with the color and border number
to get the desired look you want.


Lesson 2 - Adding Two Color Table Borders.

To add another colored border around your
image use this sample code below:

<table bgcolor="blue" border="7">
<tr><td align="center">
<table bgcolor="red" border="5">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</tr></td></table>

Here is example of an image with a two color
table border around it:

It is possible to have as many of these colored
borders as you would like.


Lesson 3 - A Colored Background With A Colored
Table Border, Around An Image.

Here is a sample with an image sitting in a colored
table border, with a background color behind it.

Here is the code to do this:

<table bgcolor="blue" border="7"width="300">
<tr><td align="center">
<table bgcolor="red"border="7">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</tr></td></table>


Lesson 4 - Using A Background Gif Or Jpg
In Place Of A Border Color Or Background Color.

You can use a background or even an image
to color your borders and backgrounds.
Please DO NOT use animated gifs to do this.

Here is a sample:

Here is the code for this:

<table background=
"http://members.tripod.com/~webtv22/ball9.jpg"
border="10" width="300">
<tr><td align="center">
<table background=
"http://members.tripod.com/~webtv22/puzz6.gif"
border="7">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</tr></td></table>


Lesson 5 - Three Different Table Backgrounds
Using Gif Or Jpg Images.

In This Sample I Will Have Three
Different Image Backgrounds In Use.

Here is a sample:

Here is the code for this:

<table background=
"http://members.tripod.com/~webtv22/ball9.jpg"
border="10" height="200" width="300">
<tr><td align="center">
<table background=
"http://members.tripod.com/~webtv25/mos49.gif"
border="0" height="200" width="300">
<tr><td align="center">
<table background=
"http://members.tripod.com/~webtv22/puzz6.gif"
border="7">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</tr></td></table>
</tr></td></table>


Lesson 6 - Adding Some Text Inside The Table.

I Will Use The Table In Lesson 5
And Add Some Text To It.

Here is the sample:

This Is The Now
Famous
Draac Ape !!
The First Image
For Many
Html Students
Of Mine.

Here is the code for this:

<table background=
"http://members.tripod.com/~webtv22/ball9.jpg"
border="10" height="200" width="300">
<tr><td align="center">
<table background=
"http://members.tripod.com/~webtv25/mos49.gif"
border="0" height="200" width="300">
<tr><td align="center">
<p>
<table background=
"http://members.tripod.com/~webtv22/puzz6.gif"
border="7">
<tr><td align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
<p>
<center>
<font size="+1"><font color="white">
<blackface>
This Is The Now
Famous
Draac Ape !!
The First Image
For Many
Html Students
Of Mine.
</blackface></font>
</center>
</tr></td></table>
</tr></td></table>


Lesson 7 - Adding Some Text Inside The Table
To The Right Of The Image.

This Will Allow You To Put Text
To The Right Of An Image With
A Table Border Around The Image.

Here is the sample:

This Is How To
Put Text To The
Right Of The Ape.

Here is the code for this:

<table background=
"http://members.tripod.com/~webtv22/ball9.jpg"
border="10" height="100" width="400">
<tr><td align="center">
<table background=
"http://members.tripod.com/~webtv25/mos49.gif"
border="0" height="100" width="400">
<tr><td align="center">
<p>
<table>
<tr><td>
<table background=
"http://members.tripod.com/~webtv22/puzz6.gif"
border="7">
<tr><td>
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</td><td>
<font size="+1"><font color="white">
<b>
This Is HowTo<br>
Put Text To The<br>
Right Of The Ape.
</b></font>
</tr></td></table>
</tr></td></table>
</tr></td></table>


Lesson 8 - Adding Some Text Inside The Table
To The Left Of The Image.

This Will Allow You To Put Text
To The Right Of An Image With
A Table Border Around The Image.
I'm Going To Use Colors In Place Of
Gifs Or Jpg Backgrounds For The Borders.

Here is the sample:

This Is How To
Put Text To The
Left Of The Ape.

Here is the code for this:

<table bgcolor="red" border="10"
height="100" width="400">
<tr><td align="center">
<table bgcolor="black" border="0"
height="100" width="400">
<tr><td align="center">
<p>
<table>
<tr><td>
<font size="+1"><font color="white">
<b>
This Is HowTo<br>
Put Text To The<br>
Left Of The Ape.
</b></font>
<td>
<table bgcolor="blue" border="7">
<tr><td>
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td></table>
</tr></td></table>
</tr></td></table>
</tr></td></table>


Lesson 9 - Image In Wood Frame With Title Bar.

Here is how to place an image in a wood
toned wood frame, with a picture title bar.

The Draac Ape

Here is the code to do this:

<table background=
"http://members.tripod.com/~webtv25/wod35.gif"
width="200" border="10">
<tr><td bgcolor="black" align="center">
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td>
<tr><td bgcolor="yellow" align="center">
<font size="+0"><font color="black"><b>
The Draac Ape
</b></font>
</tr></td></table>


Lesson 10 - Three Celled Box ( Two Colors )
With Text, Marquee Text
And One Clickable Text Link.

This is a cool box. You can fool with
the numbers and colors to see what else
you can make out of it. Try images in
place of the text. Try audioscopes too !!

The Draac Ape

Here is the code to do this:

<table bgcolor="red" border="7">
<tr><td align="center">
<table bgcolor="yellow" border="1">
<tr width="300" height="75">
<td width="100" align="center">
<font size="+2"><font color="red">
<blackface>
The
</blackface>
</font>
</td>
<td width="100" align="center">
<font size="+2"><font color="darkgreen">
<blackface>
<marquee>
Draac
</marquee>
</blackface>
</font>
</td>
<td width="100" align="center">
<font size="+2">
<blackface>
<a href=
"http://members.tripod.com/~gifs123/ape.gif">
Ape</a>
</font>
</blackface>
</tr></td></table>
</tr></td></table>


Lesson 11 - How To Make Those Music Buttons
You See At The Top Of This Page.

This is how to make a simple button using tables.
You can make them clickable to any URL.

Music

Draac's Gifs 123

Here are the codes to make these buttons:

This code is for the music link button:

<table bgcolor="yellow" border="8">
<tr><td align="center">
<font size="+2"><blackface>
<a href=
"http://members.tripod.com/~webtv41/rhapsody.mid">
Music</a>
</blackface></font>
</tr></td></table>

This code is for the page link button:

<table bgcolor="orange" border="8">
<tr><td align="center">
<font size="+2"><blackface>
<a href=
"http://members.tripod.com/~gifs123/index.html">
Draac's Gifs 123</a>
</blackface></font>
</tr></td></table>


Lesson 12 -Two Images With Colored Borders
And Title Bars Placed Side By Side.

This code may come in handy when making a
photo album.

Smile Now
Draac Ape

Here is the code to do this:

<table>
<tr><td>
<table bgcolor="red" border="7">
<tr><td>
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td>
<tr><td bgcolor="white" align="center">
<font size="+0"><font color="darkblue"><b>
Smile Now
</b></font>
</tr></td></table>
<td>
<table bgcolor="blue" border="7">
<tr><td>
<img src=
"http://members.tripod.com/~gifs123/ape.gif">
</tr></td>
<tr><td bgcolor="white" align="center">
<font size="+0"><font color="darkred"><b>
Draac Ape
</b></font>
</tr></td></table>
</tr></td></table>

Try a four images to make a kind of 4 block.
To do this, write the code for the two framed blocks
side by side, then put a <br>
and then re-write the same code again.
Maybe try 6 framed blocks !!!


Lesson 13 - Just A Cool Marquee Table Box.

Here is a cool example of a marquee table
box. Write in this code and have fun fooling
with the marquee commands,text colors
and table colors...:+)

Here is the sample:

This Is So Cool Draac

Here is the code to do this:

<table bgcolor="blue" border="7">
<tr><td>
<table bgcolor="red" border="7" width ="400"
height="75" cellpadding="4" cellspacing="4">
<th align="center">
<font size="+2"><font color="black"><blackface>
<marquee scrollamount="1" direction="right">
This
</marquee></th>
</blackface></font>
<th align="center">
<font size="+2"><font color="black"><blackface>
<marquee scrollamount="1">
Is
</marquee></th>
</blackface></font>
<th align="center">
<font size="+2"><font color="black"><blackface>
<marquee scrollamount="1" behavior="alternate">
So
</marquee></th>
</blackface></font>
<th align="center">
<font size="+2"><font color="black"><blackface>
<marquee scrollamount="1">
Cool
</marquee></th>
</blackface></font>
<th align="center">
<font size="+2"><font color="black"><blackface>
<marquee scrollamount="1" direction="right">
Draac
</marquee></th>
</blackface></font>
</tr></table>
</td></tr></table>

Cellpadding is the area you see around the text
in each of the cells. The larger the Cellpadding number
the less room the text will have to move around in.

Cellspacing are the "bars" you see in between
each of the cells. The larger the Cellspacing number,
the thicker these "bars" will be.

In the Marquee commands, the Scrollamount
is the speed in which the text moves.

When you have yours made, fool with these numbers
to see for yourself what changes take place...:+)


On To Page Two Of The Lessons !


Need A Quick Answer To A HTML Question ?
Try The HTML Newsgroup.
The People In This Group Can Answer
Any HTML Question You May Have.
Sorry Computer Users, It's A Webtv Only Group.



There Is Much Much More To Learn
About Tables, Than You See Here.
I Hope This Will Wet Your Appetite
For Table Tags And Begin Your Exploration
Of All That Can Be Done With Table Tags...:+)

draac1@webtv.net


Back To Draac's Gifs 123

Please Leave A Message For The Teacher !