HTML Basics:
Positioning Table

Step-by-Step:Positioning Table

---

What you will learn:

to create a positioning table to drag text & image into table cell

---

 Start with:   , hector 20.htm (FrontPage or FPX)

You will create a table to improve the alignment of the top of Hector's page. 

Insert Table 

1. Put the cursor at the top of the page. (CTRL + Home)
2. Click on the Table button and drag across the first two boxes in the first row. Release the mouse button.

   A 1 x 2 table is inserted at the top of your page. FrontPage and FPX have different default table settings.
    

   FrontPage

   FPX

---

Move Image and Text

1. Select the signature image and drag it to first cell. Drop the image after the cursor shows at the left of the cell.
   In FPX the cell expands to hold the entire image.

   FrontPage	FPX

   If you have trouble with drag and drop, you can cut and paste.
    

2. If necessary, click on the button to show the marks.
    
3. Select just the text on line 2. Do not include the paragraph mark.
    
4. Drag and drop the text into the second cell.
    

   FrontPage	FPX

   
    

5. If there is an extra paragraph in the cell with the text, delete it.
   

---

Format Text

Some of the formatting is lost. The text in Cell 2 has changed. It is smaller and not bold. Why? You must check the HTML code to see the answer.

1. Open the HTML code window. Look at the code for the table.
    

   <table border="0"> <tr> <td><img src="hchavez-transparent.gif" width="206" height="43"></td> <td><font color="#008040" face="Tahoma">My house is your house!</font></td> </tr> </table>

   The second <td> tag does not include the <h2> tags that you assigned to this line when you started this page. The H2 tag automatically added 2 sizes to the default text size and makes the text bold. You must add those characteristics yourself now, since your drag and drop action lost them.

   If you include the paragraph mark at the end of the text when you drag, then the H2 tag does get moved inside the TD tag.
    

2. Select the text in cell 2 and apply the H2 style to the text again.

---

Format: Text

In FrontPage, did you notice the extra blank space below the text "My house is your house" in the cell? The text is in Heading 2 format, which includes extra white space below the text. This extra white space keeps the image and the text from lining up nicely. You need to remove it.

1. Place the cursor somewhere in the text in the right cell.
    
2. Right click and choose Paragraph...
    
3. In the Spacing section, type a 0 in the Before and After text boxes. Now there is no extra white space surrounding the H2 text. Much better alignment with the signature image.
   
    

---

Format: Cell Properties
 

1. Select both cells. You can drag from the right of the text across both cells. (Dragging from the left cell is difficult when the image fills the cell.)

   Or you can move the pointer to the left of the table until it turns to the Select Row shape and then click.
    

2. Right click on a cell and from the popup menu select  Cell Properties . The Cell Properties dialog appears.

   The default settings are:
   Horizontal Alignment = Left 
   Vertical Alignment = Middle (FPX) or Default(FP)

   This dialog is also available on the Table menu.
    

3. Change Horizontal Alignment to Center
   and Vertical Alignment to Middle.
    
4. Click on OK.
   

   FrontPage	FPX

   In FPX the image and text are centered in the table, but you cannot see any change yet because the table cells are just big enough for what is in them.
    

5. Save as hector21.htm in the web folder of your Class disk.
   
   

---

Format: Table Properties

The table has a dialog of properties similar to the one for cells. With it you can align the table on the page and set its borders.

1. Right click on the table and from the popup menu select  Table Properties .
    
   The default settings are :
      Alignment = Left
      Border Size = 0
      Border Color = Default
      Minimum Width is not checked.
   
    
2. Change the following settings in the dialog:

   Alignment = Center

   Specify Width = checked

   Specify width = 100 in Percent

   Border = 0
    

3. Click on OK.

   The table now stretches across the whole page no matter what size the window is. This choice avoids the problems of unexpectedly wrapping at different window sizes. Now you can see the effect of applying Center to the cell contents. Both the signature image and the text are centered in their cells.

   The default table already had a width of 100%, but you did get that ugly border to vanish.
    

4. Delete any blank lines above or below the table.
   
    
5. Save [hector21.htm]