Adding a coloured border one the outside of a one row-two column t

[Bingocaller]

Help!! I am creating a one row-two column table with a coloured border. I
only want the coloured border on the outside of the table but I keep getting
a coloured line inbetween the two columns - whereas I want the internal line
to be the dotted line that doesn't show up when published. I have tried
selecting the table and adding a solid box border but it still colours the
internal line. I have tried collapsing the borders but this doesn't work. I
would really appreciate it if somebody could help.

 

[Murray]

Try this -

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border:solid teal; border-width:1px 0 1px 1px;">whatever</td>
<td style="border:solid teal; border-width:1px 1px 1px; 0;">whatever</td>
</tr>
</table>

 

[Bingocaller]

Thanks Murray - if poss could you also tell me how to select the table from
Design view - just the outer side of table to add the border and leave the
middle of table with dotted line. The code is great but also I want to know
how to do from Design view.

 

[Murray]

There are many things that cannot be done well if you confine your
operations to Design view. This means that the more comfortable you become
with HTML markup, the better you will become at using FP.

In FP (I am using 2003), create some new styles by using FORMAT | Style....,
select User-defined styles from the Styles List: dropdown, and enter
"td.left" in the Name (selector): field. Then click on the FORMAT button at
the bottom, select Border, and in the Style: list, click on "solid". Now
set the color value as you want, the Width to 1, and click to remove the
right border. Click OK, OK, OK to exit the dialog. Do the same process to
define a second style called td.right, only this time make it have top,
right, and bottom borders only.

This process should leave you with the following code in the head of the
page -

<style>
<!--
td.left { border-left: 1px solid #FF0000; border-top: 1px solid
#FF0000;
border-bottom: 1px solid #FF0000 }
td.right { border-right: 1px solid #FF0000; border-top: 1px solid
#FF0000;
border-bottom: 1px solid #FF0000 }
-->
</style>
</head>

You have created the CSS styles, and now you must make them work on your
page. So, click in the left cell, and bring up its properties

 

[Murray]

Oops - hit send by mistake! Here's the whole enchilada again.

There are many things that cannot be done well if you confine your
operations to Design view. This means that the more comfortable you become
with HTML markup, the better you will become at using FP.

In FP (I am using 2003), create some new styles by using FORMAT | Style....,
select User-defined styles from the Styles List: dropdown, and enter
"td.left" in the Name (selector): field. Then click on the FORMAT button at
the bottom, select Border, and in the Style: list, click on "solid". Now
set the color value as you want, the Width to 1, and click to remove the
right border. Click OK, OK, OK to exit the dialog. Do the same process to
define a second style called td.right, only this time make it have top,
right, and bottom borders only.

This process should leave you with the following code in the head of the
page -

<style>
<!--
td.left { border-left: 1px solid #FF0000; border-top: 1px solid
#FF0000;
border-bottom: 1px solid #FF0000 }
td.right { border-right: 1px solid #FF0000; border-top: 1px solid
#FF0000;
border-bottom: 1px solid #FF0000 }
-->
</style>
</head>

You have created the CSS styles, and now you must make them work on your
page. So, click in the left cell, format it using FORMAT | Style...., and
selecting td.left from the list of styles. Do the same with the right cell
and td.right. This should now give you code like the following -

<tr>
<td class="left">&nbsp;</td>
<td class="right">&nbsp;</td>
</tr>

Does that do what you wanted?