Skip Navigation.

NWE Help: Web: Authoring: Tips: Boxes

NWE Home :: Help :: Web :: Authoring :: HTML :: Tips

You can make a box such as the one on the right appear on a web page using nested tables and the background color feature of table cells. If you don't know a bit about using HTML tables yet, take a look at our HTML table help first.

My Pals

Allan
Bradley
Dallas
Jack
Lee
Michael

The code below will allow you to make nested tables like the one above.

<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=5 ALIGN=RIGHT>
  <TR>
    <TD BGCOLOR=#66CCCC>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4>
  <TR>
    <TD BGCOLOR=#66CCCC>
      <P> <STRONG>My Pals</STRONG> </P>
    </TD>
  </TR>
  <TR>
    <TD BGCOLOR=FFFFFF>
      <P>      
         Allan 	     <BR>Bradley <BR>Dallas 
         <BR>Jack    <BR>Lee     <BR>Michael
      </P>
     </TD>
   </TR>
</TABLE>

    </TD>
  </TR>
</TABLE>

Notice that the first table is given the background color #66CCCC. Since the next table is "inside" the first one, the first one makes a border around the second one. Also notice the seamless connection between the first cell of the second table and the background color of the outer table.

My Pals

Allan
Bradley
Dallas
Jack
Lee
Michael

You can also vary the amount of space given to the border by raising or lowering the CELLPADDING attribute in the first table. For example, in the table to the left of this paragraph, it has been changed to say CELLPADDING=5. See our help pages about tables to learn more.

First seen on freshmeat.

More complex bordered boxes can be made using spacer images and tables. Using a spacer image of 1 pixel by 1 pixel, and a table, you can create simple, yet elegant table borders like this: