Rhine 4   

design tips 2

Winter /Spring '97

More on 

Borders

 MORE ON TABLES AND BORDER  
BACKGROUNDS If you would  rather use a vertical border overlaid with text,   use a    two-column table to  control the page layout.     Measure the width of the  border's dark portion in  pixels, set the first column width to slightly  less than that number so  the text will stay where it  belongs - in the dark area and not in its neighbor's  cell and then set the alignment to left. For added effect, increase the  cellpadding and  cellspacing. Or, you can create a Table of Contents graphic slightly smaller than the width of the background and insert it into the first column.  
   If you want to keep the  bordered  background "clean"and place your content only  to the right, set up a two-column table. In the  first column, add enough non-breaking spaces to  stretch the column's width to equal the dark or  colored portion of the background, and then add a  few more to ensure a white  space between the two  columns. Better yet, insert  a invisible  vertical .gif(equal to the dark portion)  into the first column to hold the width.  
 Vertical Example 

 Vertical Example 2  
<TABLE WIDTH="100%>
 <TR>
   <TD WIDTH=200 HEIGHT="100%"
       ALIGN="LEFT" VALIGN="TOP">
   <IMG SRC="border.gif"
      WIDTH=200 HEIGHT=10>
   <!--Your Content Goes Here
       including a TOC.-->
   </TD>
   <TD>
   <!--Main content here.-->
   </TD>
 </TR>
</TABLE>
 

Cool  Tables

 GRAPHICS AND TABLES With  invisible      borders, empty  cells and graphics, you can   make some colorful and  exciting layouts   When you  have an empty or blank cell  in a table with borders,  enter a non-breaking space  so that cell will hold its  border.  
 Cool Tables Example  
<TABLE WIDTH="100%"Border=0>
 <TR COLSPAN=2>
  <TD ALIGN="Center" WIDTH=200
      COLSPAN=2>
  <!--Place your text here, or
      leave cell empty.-->
  </TD>
 </TR>
 <TR>
  <TD ALIGN="Center" WIDTH=200>
  <IMG SRC="your.gif>>
  </TD>
  <TD ALIGN="Center" WIDTH=200
      COLSPAN=2>
  <!--Put an image or heading 
      here-->
  </TD>
 </TR>
</TABLE>
 MORE DESIGN TIPS 
[Rhine 4] [Words] [Escapades]