Help with Tables

Not So Simple Tables Page Five

Tik Tok	Lisaviolet	Mr. Calm	My Site
My Other Site	lvdesigns	Cats	More Cats
The	Hills	Are	Alive
With	The	Sound	of
Music	And	The	Sun
Will	Come	Up	Tomorrow

Let's finish up with a couple of codes, then go practice :0)

I'm changing a few of the cells, adding links, a background image, centering some text, moving some to the right edge of the cell and adding a caption to the table:

**Not So Simple Table**
Tik Tok	Lisaviolet	Mr. Calm	My Site
My Other Site	lvdesigns	Cats	More Cats
The	Hills	Are	Alive
With	The	Sound	of
Music	And	The	Sun
Will	Come	Up	Tomorrow

I can hear all you Netscape users (including myself) yelling..."There is NO background image!" Nope, if you want to see this table in all it's glorious red, white, blue colors and a fancy chili background, you're gonna have to crank up IE.

Here is a part of the table's code:

<caption>
<b>
<font color=#FF0000> Not So Simple Table</font>
</b>
</caption>

<tr>

<td width="28%">
<center>
<a href="http://www.lisaviolet.com">Lisaviolet</a> </center>
</td>

Here is the same portion of code with my comments in red:

<table width="65%" border="10" cellspacing="3" cellpadding="3" bordercolorlight="#FF3300" bordercolordark="#0000FF" bordercolor="#CC3333" bgcolor="#FFFFCC" background="chilipepfull.jpg">(Only thing new here is the backgound="chilipepfull.jpg" you would use your own image here. I really try to stay away from this and simply use my page background to show through)

<caption> (If you want a fancy caption on your table this is the tag to open it. It will be inserted before the cell coding as shown here)
<b> (I want the text in my caption to be bold)
<font color=#FF0000> (I want the text in my caption to be red) Not So Simple Table</font> (Closing the font color tag)
</b> (Closing the bold tag)
</caption> (Closing the caption tag)

<tr> (Opens the table row items)

<td width="25%">(Indicates the table data cell. A cell width in percent is set)
<center>(I wish to center the text in the cell)
<a href="http://www.spacestationtiktok.com">(I have coded the link to my web site)Tik Tok</a>(Closed the url link tag)
</center> (Closed the center tag)
</td> (Closes the table data cell)

<td width="28%">(Indicates the table data cell. A cell width in percent is set)
<center>(I wish to center the text in the cell)
<a href="http://www.lisaviolet.com">(I have coded the link to lv's web site)Lisaviolet</a>(Closed the url link tag) </center>(Closed the center tag)
</td> (Closes the table data cell)

<td width="22%">(Indicates the table data cell. A cell width in percent is set)
<div align="right">(I wish to set this text to the cell's right side. div indicates a division or section. Align is the command. Right is the side of the cell I wish to set the text)
<a href="http://www.interdat.com/coyotemagic">(I have coded the link to lv's web site)Mr. Calm</a>(Closed the url link tag) </div>(Closed the align to right tag)
</td> (Closes the table data cell)

Final note: If you wish to insert an image or images into cells, the code is the same for any image:

img src=urltoyourimage.jpg (or gif) Just remember that the cell sizes are really going to change when you do this!

All right, if you made it this far, I have one more example on the following page. It will show a simple table, with the page background and one image inserted in a cell. If you wish to see the code, use "view source" up in your menu bar :0)

End of Page Five...Go to Page Six

Back to Site Help

This helpful information compiled by Tik Tok