CHAPTER 7
Baking the Perfect PageTOC




Setting the Table
the spiders do weave
a lovely design
for winged ones to cleave


Hungry for dinner
the spiders do spin
row upon row
lest they grow thin

What is a Table?TOC



If your homepage is intended to store information and provide a few simple anchor-links then it is not really necessary to use tables.

And yet ...

Tables allow us to prepare our homepage or webpage in a very special way.

  • Tables organize information and text creating nice displays for the transfer of data (especially scientific data).

  • Tables give you more control over the way that the browser places your homepage on the screen. This is especially true if you are using more than one type of browser. If the student creates a homepage at school and takes it home to use, it may appear quite different on the students browser at home. Variations in ways that browsers handle HTML as well as monitor resolution will effect the homepage appearance.

  • Tables allow the designer to make an webpage more interesting to viewers.


Table DesignatorsTOC



The TABLE tag is a block-like element in HTML. This means that it can be used to build structure into your page design. These kinds of structures are called modules in computer science. Each page can then be treated as a set of building blocks which can be "picked up" and moved around easily within the BODY of the document. Let us begin with some of the definitions of some of the types of tables we would like to use:

  • < TABLE>
    • defines a boxed element or table in HTML. Every TABLE must begin with the designator < TABLE> and end with the designator:
  • </ TABLE>.
    • Without these designators the browser will not be able to correctly interpret how you want your homepage to appear.


  • < TR>
    • defines a row of tables or to use the dining metaphor: a row of plates. Remember the row of plates must be placed on the table. They do not stand alone. Place your < TR> , i.e. "Table Row" in a "Table". You must end with the designator:
  • </ TR>.
    • This is like the tableware that frames a plate. Spoons on the right ... fork and knife on the left. If you do not frame your table properly, it will lead to disorderly dining.
  • < TH>
    • defines a table heading section which appears above the objects you wish to place in your table. These table tags are nested inside the < TR> tags as you will see from our examples. It acts as a Headline for you table. You must end with the designator:
  • </ TH>.

  • < TD>
    • If < TR> is a plate then < TD> is the food you put on the plate. The code "<TD>" denotes table data. These are the typical places to organize and serve your appetizing webpage to the hungry weblian. You must end with the designator:
  • </ TD>.
    • Most browsers will attempt to put your homepage on the screen, even when the table tags have been used incorrectly.


    A Note About End TagsTOC



      A table should always begins with the tag < TABLE> and a caption (optional) and end with a tag < TABLE>. This is sometimes follwed by a table header < TH> along with a series of rows. The table headers are good reminders for you and your audience and are especially helpful on webpages for explaining the given table format. We will not use a background color for our tables in this section, since tables have a more predictable look when the default background is used. Also, not all browsers will display table background colors.


    Table AttributesTOC



    An attribute is like any physical characteristic. In this case you may choose the physical characteristics of your tables using Attributes. You might also think of attributes as modifiers. Just as an adjective modifies a noun, so attributes modify the properties of a < TABLE>. By setting an attribute equal to one of the allowed modifier words you can specify the characteristics you desire. We list below some of the table attributes. It is never necessary to use them but they will give you additional control of your webpages. Also it may be worthwhile to study some of these modifiers with your class so that they can recognize their use on the Web.

    • ALIGN=
      • attribute has modifiers

      • ----> LEFT, CENTER, RIGHT, JUSTIFY and CHAR.

        The modifiers tell the browser to align the given table contents to the left, center or right of the horizontal field of view. By field of view I mean the empty space made available for the table by the browser. The ALIGN modifier is taken to be LEFT if ALIGN is not used in the table statement.

    • VALIGN=

      • attribute has modifiers

      • ----> TOP, MIDDLE, BOTTOM or BASELINE

        the modifiers allow the page designer to position the table contents in the vertical field of view. The VALIGN modifier is taken as MIDDLE if VALIGN is not used in the table statement.

    • The WIDTH=

      • attribute has modifiers

      • ----> any reasonable number.

        For example

        1. WIDTH=100 or WIDTH=100px represents 100 pixels on the screen. Pixels should be in whole numbers. The number and its suffix (i.e. px) should not have a blank space between them.
        2. WIDTH=50pt represents 50 printers points.
        3. WIDTH=60pi represents 60 pica style units.
        4. WIDTH=20in represents 20 inches while WIDTH=15.6cm represents a table width of 15.6 centimeters. Lengths may be in decimal number form.
        5. WIDTH=50% represents a width of 50 per cent of the available space. Browsers will handle this declaration quite differently. You may wish to avoid using the percentage form of WIDTH.

    • The BORDER=, CELLSPACING=, CELLPADDING=

      • attribute modifiers take the following values

      • ----> whole numbers including zero.

        For example

        1. BORDER=1 will place a border of one pixel width around the TABLE.
        2. CELLSPACING=4 places a bar of width 4 pixels between the data tables.
        3. CELLPADDING=2 places a space 2 pixels wide around each data table.


    What is a Hyperlink/Anchor?TOC



    Since we have now discussed attributes it may be worthwhile to return to the scene of the crime and consider anchor/hyperlinks in more detail. An anchor is the name for a clickable hypertext-link to another URL. It is similar to a citation. The URL may take many different forms:

    • A line, or section, in the current webpage.

    • Another webpage on a different website.

    • Another page on your website.
    By now, you are probably comfortable with the use of anchor tags within your HTML documents. In this section, I will review the concept of an anchor along with all the attributes associated to the anchor tag. You will learn to use the anchor tag in many different ways.

    To begin with, The tag

    • < A HREF= "*"> is the front end of an anchor.

      • HREF is an attribute. The value is given in quotes and should be a legitimate URL address.

      • NAME is an attribute. This attribute is usually the name of some section of a webpage. It acts like a bookmark within the document. You must first set an anchor, which uses as its HREF value the name of the NAME value. If this seems confusing, it is. The best way to understand it is by an example. See the NAME example below.

    • </ A> is the required end tag.

    A Note on SyntaxTOC

      If you forget the quote signs, the browser will probably not recognize the anchor. If you forget the end tag, you will have problems.


    Arranging Your AnchorsTOC



    There are various ways to display the anchors on your homepage, or webpage. I list here a few examples:
    • Use anchors in lists.

    • Use anchors as In-line images.

    • Use a navigation bar with the In-line images anchored to the appropriate pages.

    • Use hot buttons much as you might use a navigation bar.


    ReferencesTOC



    		•