HTML 4.0 Sourcebook:HTML in Detail

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

The HTML 4 specifications specify slightly different rules for setting cell content properties—these rules are summarized in Table 6.9. Some of these attributes (LANG, DIR, STYLE) were described earlier in this chapter, while the CHAR and CHAROFF properties are described a bit later. Note that LANG, DIR, CHAR, and CHAROFF are not supported by Internet Explorer 4.

Table 6.9 HTML 4 Rules for Determining Formatting Properties for Table Cell Content (Differences between the left and right-hand rules are noted in italics. Note that Internet Explorer 4 uses the left-hand rules for all supported properties, as discussed in the text.)


ALIGN (also, CHAR, CHAROFF)	VALIGN (also LANG,DIR, STYLE)
1. The value set by an eleme nt inside the table cell (e.g., a P or a DIV).	1. The value set by an element inside the table cell (e.g., a P or a DIV).
2. The value set on a TD or TH element.	2. The value set on a TD or TH element.
3. The value set by a TR, THEAD, TBODY, or TFOOT* element.*	3. The value set by a COL* or COLGROUP.*
4. The value set by a COL* or COLGROUP.*	4. The value set by a TR, THEAD, TBODY, or TFOOT* element.*
5. The value set by the TABLE.	5. The value set by the TABLE.
6. The default value, which may depend on language.	6. The default value, which may depend on language.

TABLE Element: Tables and Tabular Structures

Usage:	<TABLE> ... </TABLE>
Can Contain:	*CAPTION, COL, COLGROUP, TBODY, TFOOT, THEAD, TR*
Can Be Inside:	*BLOCKQUOTE, BODY, ~~CENTER~~, DD, DIV, FIELDSET, FORM, LI, NOFRAMES, NOSCRIPT, TD, TH,*
	APPLET, BUTTON, IFRAME, OBJECT
Attributes:	CLASS, DIR, ID, LANG, STYLE, TITLE, standard event handlers,
	*ALIGN, BACKGROUND, BGCOLOR, BORDER, CELLPADDING, CELLSPACING, FRAME, HEIGHT, HSPACE, RULES, SUMMARY, VSPACE, WIDTH,*
	(BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT: Internet Explorer only)

TABLE specifies a table or other tabular structure. A basic TABLE can only contain two elements: a single CAPTION, to define a table caption, and one or more TR elements, which define the table rows. The TR element, in turn, can contain TD (table data) and TH (table header) elements that contain the actual content of the table. The construction of tables, using this model, is discussed later in the TD and TH sections.

Figure 6.41 Example HTML table illustrating the use of COL and COLGROUP elements and the FRAME and RULES attributes to the TABLE element. The rendering of this document by the Internet Explorer browser is shown in Figure 6.42.

<HTML><HEAD>
<TITLE> Advanced HTML TABLEs -- HEAD, FOOT and COL Elements</TITLE>
</HEAD><BODY>

<H3>Example Table</H3>
<TABLE ALIGN=“center” WIDTH=“80%” BORDER=“2”>
<THEAD>
   <TR><TH ROWSPAN=2>              </TH>
       <TH ROWSPAN=2>Heading1      </TH>
       <TH ROWSPAN=2>Heading2      </TH>
       <TH COLSPAN=2> Main Heading </TH>
   </TR>
   <TR><TH>Subhead1                </TH>
       <TH>Subhead2                </TH>
   </TR>
</THEAD>
<TBODY>
  <TR><TH>Title1 </TH>
      <TD>Item 1 </TD>   <TD>Item2    </TD>
      <TD>Item 3 </TD>   <TD>  SubT-1 </TD>
  </TR>
  <TR><TH>Title2 </TH>
      <TD>Item 5 </TD>   <TD>Item6    </TD>
      <TD>Item 7 </TD>   <TD>  SubT-2 </TD>
  </TR>
</TBODY>
<TFOOT>
  <TR><TH>MAIN-T </TH>
      <TD>MAIN-A </TD>   <TD>MAIN-B   </TD>
      <TD>MAIN-C </TD>   <TD> SubMAIN </TD>
  </TR>
</TFOOT></TABLE>

<H3>Same Table, With:</H3>
<UL><LI><B>COL</B>,<B>COLGROUP</B>, <B>THEAD</B> etc., elements
    <LI><B>TABLE</B> element <B>FRAME</B> and <B>RULES</B> Attributes</UL>
<TABLE FRAME=“hsides” RULES=“groups”
       ALIGN=“center” WIDTH=“80%” BORDER=“2”>
<COLGROUP>
  <COL ALIGN=“left” BGCOLOR=“#cccccc”>   <!-- Column background color -->
 </COLGROUP>
<COLGROUP>                               <!-- Group columns for rules -->
  <COL SPAN=“2” ALIGN=“middle”>
  <COL ALIGN=“center”>
</COLGROUP>
<COLGROUP>
  <COL ALIGN=“right”>
</COLGROUP>
<THEAD>
   <TR><TH ROWSPAN=2>              </TH>
       <TH ROWSPAN=2>Heading1      </TH>
       <TH ROWSPAN=2>Heading2      </TH>
       <TH COLSPAN=2> Main Heading </TH>
   </TR>
   <TR><TH>Subhead1                </TH>
       <TH>Subhead2                </TH>
   </TR>
</THEAD>
<TBODY BGCOLOR=“yellow”>                 <!-- Color for table body    -->
 <TR><TH>Title1 </TH>
      <TD>Item 1 </TD>   <TD>Item2    </TD>
      <TD>Item 3 </TD>   <TD>  SubT-1 </TD>
  </TR>
  <TR><TH>Title2 </TH>
      <TD>Item 5 </TD>   <TD>Item6    </TD>
      <TD>Item 7 </TD>   <TD>  SubT-2 </TD>
  </TR>
</TBODY>
<TFOOT>
  <TR><TH>MAIN-T </TH>
      <TD>MAIN-A </TD>   <TD>MAIN-B   </TD>
      <TD>MAIN-C </TD>   <TD> SubMAIN </TD>
  </TR>
</TFOOT>
</TABLE>
</BODY> </HTML>

Figure 6.42 Display, by Internet Explorer 4, of the document listed in Figure 6.41.

Internet Explorer supports the more advanced HTML 4 table model, which includes extra elements for grouping rows into the table header (THEAD), body (TBODY), and footer (TFOOT). In addition, the COLGROUP and COL elements permit grouping of columns: for example, to assign them common properties (widths, alignment, borders). These newer elements are compatible with the older table approach, so that a browser that does not understand these elements can still render the table content correctly, albeit without the extra implied structure.

By default, tables are drawn without borders, with a predetermined spacing between items in the table, and with a table width that depends on the table content and that is calculated by the table-generation program. Finally, tables are, by default, left-aligned on the page and break all text flow. This means that text preceding a TABLE appears above the rendered table, and text following a TABLE appears below it.

TABLE supports the standard “generic” and “event-handler” attributes described earlier in this chapter. Note that the table-related event handlers are only supported by Internet Explorer 4 and are not supported by Netscape Navigator 4.

TABLE can take several additional and optional attributes that modify the presentation details of the table. BORDER, CELLPADDING, and CELLSPACING describe how borders should be drawn around the table and how much spacing should be left between items in the table. WIDTH specifies the desired width of the table, either as an absolute width in pixels or as a percentage of the full window width. Last, ALIGN allows for floating tables, which can float to the left or right margins, and which can have text flow around them. The details of these five attributes are provided here.

The more advanced table model supported by Internet Explorer supports additional attributes, FRAME and RULES, for further specifying how borders should be drawn. The use of these attributes is explained in the following descriptions.

Proprietary extensions to TABLE allow for control of the table cell background color (BGCOLOR). Microsoft supports additional extensions to control the color of the table borders, and to apply a background image for the table content.

ALIGN=“center,” “left,” “right” (optional) Allows for floating tables, analogous to floating images as described in the IMG element section. ALIGN=“left” floats the table to the left margin and allows subsequent text to flow to the right of the table. ALIGN=“right” floats the table to the right margin and allows subsequent text to flow to the left of the table. ALIGN=“center” should float the image to the center of the window, with text flowing around it. Some browsers (e.g., Netscape Navigator 3 and earlier) do not support this attribute value and assume in its place the default alignment (left-aligned, with no text flow around the table). Tables can also be centered by placing them within a DIV element with ALIGN=“center.”
If ALIGN is absent, the table is aligned with the left margin, with text allowed only above or below the table. There is no text flow around the table.

BACKGROUND=“#url” (optional) Specifies a background image to be used to tile the background of the table. This attribute is supported by Internet Explorer 3 and 4 and by Netscape Navigator 4. Note that Navigator 4 independently tiles the background of each table cell, while Internet Explorer treats the entire background of the table as a single region to be tiled (see Figure 6.36).

BGCOLOR=“#rrggbb,” or “color” (optional) Specifies a background color for the table—with Netscape Navigator this only changes the background color for the table cells, while with Internet Explorer this also changes the color of the space between cells specified by the CELLSPACING attribute (the width of the dividing lines and border). Note that Internet Explorer supports special border color attributes to change the colors of the borders. Note also that with Netscape Navigator, this color does not affect the spacing between cells or cells that are empty (contain only whitespace). However, adding a single   (non-breaking space) entity to an otherwise empty cell will cause the cell background to be colored.

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.