Updated March 30th
I want to thank you for taking the time to visit me.
In this website you will learn all the basics needed to
create your own webpage. These pages will continue to evolve so
keep checking back. I hope you enjoy your visit here, and if you like my pages, bookmark
them for future visits. I also invite you to visit my other 4
websites while you're here. You will find everything you need in
the directory listed below.
Please choose from the table below to go wherever you would like.
Mastering Tables
Tables can be used any number of different ways to improve the look of your webpage. You can use them to "frame" pictures, making them more professional looking. You can use them to organize your page index, as I have at the top and bottom tables on this page. Tables also come in handy when you want to have a picture with text beside it. Let's begin this tutorial by explaining the tags used in making tables.
| Starting Tag | Ending Tag | Tag Description |
| <TABLE> | </TABLE> | Containers for a borderless table |
| <TABLE BORDER> | </TABLE> | Tag pair for a table with borders |
| <TR> | </TR> | Establishes a row within a table |
| <TD> | </TD> | Defines a cell within a table |
| <TD ALIGN> | </TD> | Defines the horizontal spacing within a cell |
| <TD VALIGN> | </TD> | Defines the vertical spacing within a cell |
| <CELLSPACING> | </CELLSPACING> | Establishes the cellspacing inside your table |
| <TH> | </TH> | Centers a heading at a table's top or side |
| <CAPTION> | </CAPTION> | Places a title at the top of the table |
If you look under "View" in your browser, then select "Document Source", you will see how I set up the table above. You can use this type of table combination when you want to organize things.
Here is the combination you will need to use a table as a "frame" for an image.
|
<TABLE BORDER=5 ALIGN="LEFT"> <TD><IMG BORDER=0 WIDTH=128 HEIGHT=92 SRC="1logo.gif"></TD></TABLE> |
This is what it will look like.
 |
Note:
You will notice that all of the table borders within this website are a light teal color. To make your table border a specific color all you need to do is establish that color as your <BODY BGCOLOR> in your begining body background HTML. Also, you can change the thickness of your outside border by changing the number value for <BORDER> tag within your table HTML.
To make a table where you display a picture on one side, and a description of the picture beside it, use the following combination:
| <CENTER><TABLE BORDER=10 CELLSPACING=8><TR><TD VALIGN="MIDDLE" ALIGN="CENTER><IMG WIDTH=249 HEIGHT=302 SRC="Misty.jpg" ALT="My Picture"></TD> <TD ALIGN="LEFT" ALIGN="TOP"></TD></A></TD> <TD BGCOLOR="#20f4f8" VALIGN="LEFT" ALIGN="TOP"> <FONT COLOR="#000000" FACE="Veranda"> This is where you can enter a description of the picture you use. </FONT></TD></TR></TABLE> |
This is what it will look like:
 |
This is where you can enter a description of the picture you use. |
In the above combination you will notice a few tags we haven't covered already. The <TD BGCOLOR>, <FONT COLOR & FACE> tags. The <TD BGCOLOR> will establish what your background color will be within your table. The <FONT COLOR> tag establishes what color you want your font to be in the table, and the <FACE> tag establishes what type of font you want to use.
I hope these examples have been a help to you. By changing them, and rearranging them, you can come up with some spectacular tables.
Well, there you have it, all the basics needed to create your own webpage. I hope this has been some help to you beginners, and possibly a refresher to old timers with short memories (like mine..lol) I will be adding some tutorials on making your own graphics in the very near future. I will attempt to teach you how to make your own bars, buttons, and backgrounds. If you have any suggestions as to other things you might like to see me attempt to teach, send me an e-mail with your suggestion.
© 1997, 1998 Misty's Magical Designs, All Rights Reserved,
written permission needed to use all or part of
anything on this page.