Building fancy borders for HTML tables using bimaps

In order to build an HTML table inside a fancy frame, a few considerations about the tag <TD> together with the image files have to be made.
These examples are taken from http://my.aol.com, but many attractive tables are available on the Internet; see among others www.swissonline.ch

1. Images between <TD> and </TD> tags and inside the <TD> tag.

Let's use the image 1_widget_center.gif, which is 10 pixels wide and 24 high and put it between an <TD> and </TD>


<TABLE border=1>
<TR>
  <TD><IMG SRC="images/1_widget_center.gif" WIDTH="10" HEIGHT="24" BORDER="0" ALT=""></TD>
</TR>
</TABLE>

The result is a rectangle 10X24; if you change the table`s dimension using the width parameter, the size of the data field remains the same

It is possible to change the width of the image changing the value of WIDTH in the <IMG> tag, but the best solution is to include the image as background in the <TD> tag, specifying only its height.

The result is an image covering the complete width of the table.
The advantage of this solution is that we don't have hard-coded values.

2. Building a frame for the HTML table

We will now build a light blue frame for the image drops1.gif, which has been composed using the tube picture provided by PaintShop Pro. The table contains three rows, each made of one data field.

<TABLE>
<TR>
<TD valign="top" height=24 background="images/1_widget_center.gif"><TD>
</TR>
<TR>
<TD><IMG SRC="images/drops1.gif" WIDTH="168" HEIGHT="101" BORDER="2" ALT=""></TD>
</TR>
<TR>
<TD valign="top" height=24 background="images/1_widget_center.gif"></TD>
</TR>
</TABLE>

Since we haven't specified the width of 1_widget_center.gif, the TD field gets stretched out.

The same is true, of course, also with a larger image drops2.gif

3. Adding the corners to the 3d frame.

We now want to add the corners on the upper left and right sides; they have to be specified as an image between the tags and not as a background image. This is because the components come from a picture that has been subdivided where the corners have a fixed size.

There is a small gap between the components; to avoid this, the properties cellspacing=0 and cellpadding=0 should be used in the table definition:

Let's complete the frame using five more images: body left and right, bottom left and right, bottom center.

4. Adding more components to the 3d border.

We will now see that one is not limited to simply having colour frames without extra contents; you can add more components, as, for example, on the web page of myAol.

The effects can be very interesting.

5. Conclusions.

To build an attractive frame around a central picture we normally need nine images;

the top left, top right, bottom left and bottom right must be put between a <TD> and a <TD> tags with their real sizes.

Top-left	Top-middle	Top-right
Middle-Left		Middle-Right
Bottom-left	Bottom	Bottom-right

The top middle and the bottom middle must be used as a background image for the central <TD> , specifying solely the height .
The middle-left and the middle-right must be used as background images, specifying the width only
The image the frame is for is put in the center with its real size between two TD tags.

[Home] [Web Design] [HTML tutorials] [Javascript] [PSP] [About us] [Links] [Anonymous email] [Best hosting] [Daily Oracle Life] [IT jobs in Switzerland] [Web Submission] [Web traffic]

Rate this article ...
Very poor	Poor	Average	Good	Very good