Learn...

FrontPage Intro

FrontPage Editing Basics

Make a FrontPage Template

FrontPage FAQ

Dynamic Web Templates (FP)

Swish Basics

Articles

Product-Specific

7. Thin-Bordered Boxes

We used a "trick" technique to make the thin-bordered boxes for Table 1/2, Table 6/7, and Table 8/9. Table 1/2 has a slightly thicker border. This technique is useful for any kind of box with a border that you might want to use in your site.

Thin-bordered boxes, are, as you can see, merely two tables with one nested inside the other. What's important is that the outside table has a specified width, whether in pixels or a percentage.

Table 1 and Table 2

First we inserted Table 1 into the Main Table. Table 1 was set to be 147 pixels wide and center aligned with a cell padding of 3 with only 1 row and 1 column (Note: The cell padding will determine how thick your "border" is.). The border and cell spacing were set to 0. Then we selected Table Properties and set the background color of the table to be light blue (or whatever color you want the border to be). We then selected Cell Properties and set the vertical alignment as middle and the horizontal alignment to be center. This makes sure that your inner table has an even border all the way around.

Then we inserted Table 2 into Table 1. Table two also only had 1 row and 1 column with the border and cell spacing set to 0, but had a width of 100%. We selected Table Properties and set the background color of the table to be white.

We set the cell padding of Table 2 to be 0, but you may want to consider a cell padding of 2 or 3 if you are going to have text in the box. That way there will be a slight margin between the text and the "border."

Then we inserted the picture of a cute baby!

Tables 6 and 7, Tables 8 and 9

We followed the same technique to make these thin-bordered boxes, with a few slight changes which you may compare below:

Outer Tables

Inner Tables

Table 2	Width: 100% Cell Padding: 0 px Background color: White
Table 7	Width: 100% Cell Padding: 2 px Background image: checkers
Table 9	Width: 100% Cell Padding: 2 px Background image:

Read on to find out how we finished off the page template and started the web template.

Next: Web Template
Back: Example