HTML Basics:
Positioning Table

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9, Chrome, Firefox; Notepad? Icon: Change web



Tables are used in two ways on web pages.

  • Display data

  • Position elements on page

Positioning Tables

HTML was designed to give the browser a LOT of flexibility in how pages display. Text wrapping is a great strength of HTML, but it can also get in the way.

Problem: How to put things side by side on the page (and make sure they stay there)?

Solution: Put them in a table.

The parts of a positioning table do not have any logical relationship to each other. It's just a trick to keep things in position on the page.

 


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPX To subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    Tables Arrow - Subtopic open Table: Attributes for Table tags
    icon-footprintData Table
    icon-footprintPosition Table
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics


Search 
Glossary
  
Appendix



Example of a positioning table:

Below is an illustration of the page you are reading. Dotted lines show the table cells used to position the parts. Sizing these parts can be quite a challenge!

 

The HTML page you are reading, with the table cells shown with dotted lines.

Using a table to position parts of page

The title text and the image logo for the course are in separate cells in the same row. A blank cell at the left has a transparent image in it to keep the text off of the side border background. Another table puts the text and table of contents in separate cells. 

Icon Step-by-Step

Step-by-Step:Positioning Table

 Icon Step-by-Step

What you will learn:

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


 Start with Class disk, 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. Button: Table - palette open with two cells selectedClick on Button: Table 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.
     

    Blank table appears, stretching across the page
    FrontPage

    New blank table inserted at top right
    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.
    Dragging image into table cell Dragging image into table cell
    FrontPage FPX

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

  2. If necessary, click on Button: Show marks 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.
     
    Dragging text into table cell Dragging text into table cell
    FrontPage FPX


     

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

Title table with image and text

Title table with image and text

FrontPage FPX

Icon: FPX 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.

Title table formatted

Title table formatted

FrontPage FPX

Icon: FrontPageFormat: 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. Dialog: Paragraph - SpacingRight 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.
    Text: hector20.htm with paragraph white space removed
     

Format: Cell Properties
 

  1. Both cells selected.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 Pointer: Select Row the Select Row shape and then click.
     

  2. Right Click Menu: Cell PropertiesRight 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. Dialog: Cell PropertiesChange Horizontal Alignment to Center
    and Vertical Alignment to Middle.
     
  4. Click on OK.
    Image and text are centered in the table. Image and text are centered in the table.
    FrontPage FPX

    Icon: 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. Class disk 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 Menu: Table PropertiesRight 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:

    Dialog: Table PropertiesAlignment = Center

    Specify Width = checked

    Specify width = 100 in Percent

    Border = 0
     

  3. Click on OK.

    Icon: FPXThe 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.

    Icon: FrontPage 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. hector20.htm - doneClass disk Save [hector21.htm]