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">