Cell borders

Curtis · Jan 11, 2004

Is there a way to set up borders of a cell and round the
edges? Seems simple enough....... Did I miss something
someplace?

Jim Buyens · Jan 11, 2004

Curtis said:
Is there a way to set up borders of a cell and round the
edges? Seems simple enough....... Did I miss something
someplace?

In FP2002 and earlier (and for greatest control) you need to create a
3-column, 3-row table wherever you want a cell with rounded corners to
appear.

o The center cell will contain your content.
o The corner cells will contain quarter-round graphics (that is, small
graphics,
each displaying 90 degrees of a circle.
o The side cells typically contain a transparent GIF file the same height
and
width as the corner graphics. You then configure the background color
of the four side cells to match the corners.

In FP2003, you can:

1. Add a Layout Table to your page. (This will serve as a sort of drawing
surface).
2. Draw Layout Cells within the Layout Table. (These will be your content
areas).
3. Configure the Layout cells to have borders and rounded corners.

In this latter procedure, FP2002 is basically performing the first procedure
for you. However, as often happens when working through a GUI, ease of use
comes at the cost of some flexibility.

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------

MD WebsUnlimited.com · Jan 11, 2004

You'd be better off just creating the 3x3 table in FP3. Layout tables are
meant to be used to layout an entire page and while they accomplish that,
IMHO, they are a horrible mess underneath (HTML). All layout page tables are
because they are tables nested in tables.

To create the rounded corner table using the FP3 layout it produces code
something like this, yours could be different.

<table cellpadding="0" cellspacing="0" width="413" height="373">

<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">

<tr>
<td width="20">
<img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tl_812.gif" width="20"
height="20"></td>
<td bgcolor="#000000" nowrap height="20" width="100%">

 </td>
</tr>
<tr>
<td valign="top" colspan="2" height="100%" bgcolor="#000000">

 </td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#000000"> </td>
<td valign="top" height="126">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">

<tr>
<td bgcolor="#000000" nowrap width="100%">

 </td>
<td height="20" width="20">
<img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tr_914.gif" width="20"
height="20"></td>
</tr>
<tr>
<td valign="top" bgcolor="#000000" colspan="2" height="100%">

 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#000000"> </td>
<td valign="top">

 </td>
<td valign="top" bgcolor="#000000" height="148"> </td>
</tr>
<tr>
<td valign="top" width="120">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">

<tr>
<td valign="top" colspan="2" height="100%" bgcolor="#000000">

 </td>
</tr>
<tr>
<td width="20">
<img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_bl_1016.gif" width="20"
height="20"></td>
<td nowrap bgcolor="#000000" height="20" width="100%">

 </td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#000000" width="122"> </td>
<td valign="top" height="99" width="171">
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">

<tr>
<td valign="top" colspan="2" height="100%" bgcolor="#000000">

 </td>
</tr>
<tr>
<td nowrap bgcolor="#000000" width="100%">

 </td>
<td height="20" width="20">
<img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_br_1118.gif" width="20"
height="20"></td>
</tr>
</table>
</td>
</tr>
</table>

While creating it manually would require a single table to be rendered:

<table border="0" width="100%" id="table1">
<tr>
<td width="49"> <img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tl_812.gif" width="49"
height="20"></td>
</td>
<td bgcolor="#000000"> </td>
<td><img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tl_812.gif" width="49"
height="20"></td>
</tr>
<tr>
<td width="49"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="49"><img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tl_812.gif" width="49"
height="20"></td>
<td> </td>
<td><img alt=""
src="file:///C:/Documents%20and%20Settings/Mike/Local%20Settings/Temporary%2
0Internet%20Files/FrontPageTempDir/MsoPnl_Cnr_tl_812.gif" width="49"
height="20"></td>
</tr>
</table>

Because the latter is a single table it will render, display, much faster
than the FP3 layout table.

Note: There is a trend to move away from table based design toward CSS based
design, IMHO, the time as come to do so and only use table where required.

Cell borders

Curtis

Jim Buyens

MD WebsUnlimited.com