Developer

Improve HTML documents with image frames and text boxes

If you're looking for a quick and easy way to make important information stand out on your Web pages, we've got the answer. Find out how to create image frames and text boxes that can help improve your HTML documents.


Newspapers, magazines, and other publications often use eye-catching boxes as a means to draw attention to special information. You can use the same technique on your Web pages, and you won’t need years of layout design classes to do it. Here’s how you can make certain selections of information stand out by doing just a few things with tables in an HTML document.

The picture frame
Figure A shows a plain, rather boring picture of myself.

Figure A
Just an ordinary photo of me with no frame or caption


Figure B, on the other hand, is a more attractive and informative image. This “picture frame” effect can be used to highlight the author of an article or to display a picture and a caption to go with a story.

Figure B
Here’s the same photo of me, but now it’s surrounded by a green border and has a caption.


The following is the HTML code used to create such a frame:
<table width="91" border="0" bgcolor="00CC00">
 <tr>
 <td>
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#0000FF"><b>Title</b></font></div>
 </td>
 </tr>
 <tr>
 <td><img src="me.jpg"></td>
 </tr>
</table>

You’ll notice that the code for the table contains a background color. This is a handy trick when working with these “boxes” of information. The lower cell contains nothing but the picture itself, while the upper cell contains the caption information with a solid color background, which extends all the way around the picture.

The box
Another easy way to make information stand out on your Web page is through the use of boxes. Figure C shows an example of such a technique.

Figure C
Multicolored boxes are a great way to emphasize important information.


The following code is used to create this box:
<table width=200 bgcolor="CC00CC" cellpadding=1 cellspacing=0 border=0>
 <tr>
 <td>
 <font face="Tahoma, Verdana, Arial" size="2" color="#FFFFFF">
 <b>&nbsp;&nbsp;Title Area</b></font>
 </td>
 </tr>
 <tr>
 <td>
 <table width="100%" bgcolor="FFFFFF" cellpadding=6 cellspacing=0 border=0>
 <tr>
  <td>
  <font face="Tahoma, Verdana, Arial" size="2">
  This is where the information
  goes. Isn't this a cool little box?</font>
  </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

In this example, a table is nested within another table. Note that the background color of the outer table is purple (CC00CC). The background color of the inner table, however, is white (FFFFFF). This difference in background color is part of what causes the thin border around the table to appear, creating the box effect.

In addition to the difference in background color, there is another key component involved in creating the box effect—the inner table width. The outer table must have a defined pixel width (in this case, 200 pixels). The inner table, however, must have a width of 100 percent. With the inner table width set at 100 percent, the browser will stretch the inner table (with the white background) out to the boundaries of the outer table, leaving a fine line of background color between the inner and outer tables.

Wrapping up
Although these two layout techniques are relatively simple, they can dramatically improve the appearance of your Web page. With these two tricks, you should be able to spruce up your pages in no time.

Editor's Picks

Free Newsletters, In your Inbox