http://www.bravenet.com/reviews/archives/tips.php

Images as Table Borders  

We all know how to code a background image for a table, using the table tag's Background
attribute. This trick is a little different, as we are spoofing our table by assigning a 
background image inside the table's outer cells, creating an effect of a background. 

Our end result will be a table with some static content in the middle, surrounded by cells 
that are actually sourcing an image, disguised as a background border. Essentially, our 
image will form two table rows (<TR>) above and below our content, along with two table 
cells (<TD>) to the left and right. In the middle of all of this is our main table content, 
framed all around by our image. Here's how it works:

Our first step will be to build a table of three rows. We'll inject our image into the top 
and bottom rows, as well as in the side cells of the middle row. This creates the illusion 
of a picture frame around the main content. Be sure to "colspan" your top and bottom cells 
as shown in the code below, and use non-breaking spaces (&nbsp;) in otherwise empty cells to 
make sure they display.

We have set a width and height on our background cells to 10. This is ideal for a 10x10 
pixel image, but you can choose whatever you like. Here's how it all works:

<table> 
   <tr>
       <td height=10 colspan=3 background="img">&nbsp;</td>
   </tr>
   <tr>
       <td width=10 background="img"></td>
       <td> "Table Content" </td>
       <td width=10 background="img"></td>
   </tr>
   <tr>
       <td height=10 colspan=3 background="img">&nbsp;</td>
   </tr>
</table> 
 


================


Creating Vertical Rules and Lines 

Horizontal rules or lines are a snap in HTML, as they are embedded in the language with the 
<HR> tag. No such tag exists for vertical lines, but it's pretty simple to create this 
effect on your pages.

We do this by building a .gif image we'll call "vertbar.gif" and then placing that next to 
some text. You can build the image to width, say 2 pixels, and form the height as desired 
using the img height attribute, like this:

<IMG SRC="vertbar.gif" width=2 height=n align="left">

Now type some text next to the image and you'll see that it flows alongside the image.

Incidentally, did you know that the Horizontal Rule tag <HR> can take attributes of its own? 
They include:


Width: width in pixels 
Size: height in pixels 
Align: left, right or center 
Color: color in hex format

So, we could build a horizontal line, using attributes, like this:

<HR width=100 size=2 color="#000000" align="center"> 
 


======================


Tips for Better Tables 

Tables are probably the most versatile HTML elements for any designer. Most websites take 
advantage of tables in one way or another. Many webmasters never get beyond basic table 
design, and don't realize the incredible diversity of effects that tables allow us to 
create. If you are nervous about using tables, or learning the more advanced methods to 
alter your page layout, you are missing out on some of the most valuable coding that can be 
achieved with HTML.

Here are two table tips that many of you may not be familiar with. Play with table code to 
get the results you desire. With a little practice and effort, you will be amazed at the 
versatility and functionality of tables in your HTML documents.

Adding Space Around a Table: Tables can take the hspace and vspace attributes to offset from 
other elements on the page.

<table hspace=20 vspace=20>

Wrapping text Around a Table: To make text wrap around a table, we can use the same method 
employed by the IMG tag. Thus, we simply specify the placement of the table using the 
"align" attribute, and text will flow around our table to that side.

<table align="left">