HTML 4.0 Sourcebook:HTML and Document Design

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Figure 2.23 is a simple example document that illustrates these features. This document has two main structural tables. The first table, at the top of the page, generates the page caption (Table Test Documents) to the right and the navigation buttons to the left—notice how the WIDTH=“100%” attribute causes the table to fully span the page width, while the ALIGN=“right” attribute in the right–hand table cell aligns the page caption with the right–hand margin of the page. Note also the use of the FONT element to reduce the size of the text within these two cells: FONT, discussed in detail in Chapter 6, can modify text font size and color and can also suggest the font face (e.g. Arial or Times Roman) to use. Note, however, that the style sheet mechanism provides better ways of doing this, as discussed in Chapter 7.

The second table also has WIDTH=“100%”, and is used to structure the layout for the remainder of the page. This table has one row, consisting of three cells: The first cell, of WIDTH=“40”, introduces a left margin for the page. The third cell, of WIDTH=“150”, has a background color and could be used for sidebar graphics or text associated with the main content (here it simply has some placeholder text). The middle cell is of unspecified size and is sized to take up the remaining space, such that the table fills the full width of the browser. Note that this cell contains a second table.

How reliable are these WIDTH specifications? For TABLE, these values are quite reliable: The TABLE will generally be of the specified size, provided the content actually fits horizontally in the specified space. However, when specified for particular cells, WIDTH values are treated by many browsers (in particular, Netscape Navigator 3 and 4) as a “hint” to the browser, rather than as a hard rule: Such browsers often adjust cell sizes far from the WIDTH specified values. To actually fix the cell size at a particular value, you can place an IMG element whose WIDTH property is set to the desired size within the cell. Note, in Figure 2.23, how the left– and right–hand cells both contain IMG elements with HEIGHT=“1” and WIDTH values equal to the desired cell width (you need to make allowances, in this width calculation, for the cell spacing and cell padding lengths). Here, the actual image file is a 1 pixel by 1 pixel transparent GIF image—this is invisible on the display and is there only to ensure the desired cell widths.

Figure 2.23 HTML document illustrating the use of TABLEs to structure page layout. Browser rendering of this document is shown in Figure 2.24.

<HTML><HEAD><TITLE>Test of Table Width Specifications</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“0” CELLPADDING=“0” CELLSPACING=“0” WIDTH=“100%”>
<TR>
  <TD VALIGN=“top” ALIGN=“left”><FONT SIZE=“–1”>
     <A HREF=“home.html”>Home</A>     ~ <A HREF=“home.html”>Next</A> ~
     <A HREF=“home.html”>Previous</A> ~ <A HREF=“home.html”>Index</A></FONT>
  </TD>
  <TD VALIGN=“top” ALIGN=“right”><FONT SIZE=“–1”>
     <B><I>Table Test Documents</I></B></FONT></TD>
</TR></TABLE>
<HR SIZE=“2” NOSHADE>
<TABLE BORDER=“0” CELLPADDING=“8” CELLSPACING=“0” WIDTH=“100%”>
<TR>
   <TD WIDTH=“40”><IMG SRC=“transparent.gif” ALT=“” HEIGHT=“1” WIDTH=“40”></TD>
   <TD>
       <H1>This Is The Main Content</H1>
       <P>The table has three cells: the first cell, at the left,
          adds an artificial left margin. The second cell, in the
          middle, takes the main content of the page.The final cell,
          at the right, might contains a decorative sidebar.
       <TABLE HSPACE=“10” ALIGN=“left” CELLPADDING=“4”>
           <TR> <TD BGCOLOR=“yellow”COLSPAN=“2”><B>FLYING 
                TURTLES</B></TD> </TR>
           <TR> <TD BGCOLOR=“fuchsia”><B>Buy</B><BR> The Album</TD>
                <TD BGCOLOR=“cyan”><B>See</B><BR> The Movie</TD>
           </TR>
       </TABLE>
       <BR> <B>Note that you can</B> also have tables within a table
       cell, for further substructure of the page. An example is the 
       table to the left of this paragraph.
   </TD>
   <TD  WIDTH=“150” VALIGN=“middle”  BGCOLOR=“#ffff66”>
      <P>Here is some space for extra text, highlighted by
      the table cell’s background color.
      <BR><IMG SRC=“transparent.gif” ALT=“” HEIGHT=“1” WIDTH=“150”> 
   </TD>
</TR>
</TABLE>
</BODY></HTML>

Figure 2.24 Rendering, by the Internet Explorer 4 browser, of the document listed in Figure 2.23.

Although table elements can produce quite acceptable page layouts, the mechanism is rather crude and, to say the least, time–consuming—it takes a long time to figure out how to lay out a complicated page. The new cascading style sheets technology offers much improved mechanisms for controlling page layout, as discussed in Chapter 7.

Lessons from Example 9

1. The spacing within table cells can be controlled via the TABLE element CELLPADDING attribute, while the spacing between cells is controlled via CELLSPACING. The WIDTH attribute can set a preferred size for the entire table, either in pixels or as a percentage of the available width.

2. BGCOLOR can set the default background color for the entire table, for a row, or for a cell. Note that the effect of BGCOLOR applied to TABLE is different on Netscape Navigator and Internet Explorer.

3. The ALIGN and VALIGN attributes, applied to table rows or table cells, define how the cell content should be aligned. WIDTH, when applied to a cell, defines a preferred cell width, either in pixels or as a percentage of the full size of the table.

Exercises for Example 9

Visit a variety of Web sites with complicated page layouts and save the documents onto your hard disk. Then, go into each document with an editor and examine how the page is designed. Most likely the design uses table elements to position the page components on the display.

Example 10: Fill–in Forms

This example looks at the HTML FORM element. FORM elements let a document author solicit user input through documents containing fill–in forms. Using this element, a designer can build a document containing checkboxes, radio boxes, pull–down lists, text windows, and menus, and can configure this FORM to send the gathered data to a program on an HTTP server. For example, FORMs can be used to collect data for a database search, solicit data for an on–line questionnaire, accept electronic text for submission to a database, or solicit electronic messages for forwarding to a particular user.

The example in Figure 2.25 illustrates this last case; namely, a FORM that lets the user type in a message for forwarding to a recipient chosen from a list. Figure 2.26 shows this form rendered by Internet Explorer, while Figure 2.27 shows the rendering by lynx.

The FORM Element

Let’s first look at Figure 2.25 and the FORM element start tag:

<FORM ACTION=“http://side.edu/cgi–bin/send_note”>

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.