Syntax:

<TABLE BORDER[=n] WIDTH=n[%] CELLPADDING=n CELLSPACING=n

BGCOLOR="ColorName ¦ #RRGGBB" BACKGROUND="URL of image">

<CAPTION [ALIGN=BOTTOM]> CAPTION TEXT</CAPTION>

<TR ALIGN=left ¦ center ¦ right VALIGN=top ¦ middle ¦ bottom

BGCOLOR="ColorName ¦ #RRGGBB" BACKGROUND="URL to image">

<TH ALIGN=left ¦ center ¦ right VALIGN=top ¦ middle ¦ bottom COLSPAN=n

ROWSPAN=n> HEADER TEXT</TH>

<TD ALIGN=left ¦ center ¦ right VALIGN=top ¦ middle ¦ bottom COLSPAN=n

ROWSPAN=n>CELL CONTENT</TD>

<TD …>


</TR>

<TR …>
</TABLE>

The TABLE is handy for presenting tabular data as in a spreadsheet, but can be used for many other purposes. Tables have been around for a long time but the <TABLE> tags were not included in the HTML Specifications prior to version 3.2. Most browsers that are less than about 3 years old support tables and both Netscape and MSIE are working on extending their capabilities.

The <TABLE> tag

The <TABLE> … </TABLE> tags define the limits of the table. All table related tags must be within these tags or will be ignored by the browser. If the closing tag is omitted, the entire table will be ignored. This is because the browser reads through the entire table information to determine how much memory is needed before the information is rendered on the screen. If the browser cannot determine where the table data ends, the entire table and probably everything that follows it in your document will not be displayed.

Common Tag Attributes

There are several attributes that are common to multiple table tags. When applied to a lower level tag, these attributes override the settings at higher levels. For example:

Attributes
ALIGN	Sets horizontal alignment of the contents within a cell to  LEFT CENTER RIGHT
VALIGN	Sets vertical alignment of the contents within a cell to  TOP MIDDLE BOTTOM
COLSPAN	Specifies the number of columns the cell spans
ROWSPAN	Specifies the number of rows the cell spans
BACKGROUND	Specifies the URL of a background image
BGCOLOR	Specifies the background color

Other Attributes of the <TABLE> tag

Attribute
BORDER	Specifies if a border is displayed around the table; if the number is included, specifies the size of the border in pixels.
WIDTH	Specifies the width of the table on the screen; can be specified as the number of pixels or as a percentage of the total browser width
CELLPADDING	Specifies the spacing around the cell contents within the cell in pixels
CELLSPACING	Specifies the space between cells in pixels

The Table Caption

The <CAPTION> tag places a caption title above (or alternately, below) the table. The tag must be within the TABLE tag but separate from any other tag. It is best to place this tag as the first or last line within the TABLE tag to avoid accidentally including within another tag.

The Table Header

The <TH> tag places a header in the current cell. This can be used as a column header, header for several column, or for the entire table. By default, the header is centered in the cell and bolded.

The Table Row

The <TR> tag defines a row of cells within the table. You can define default attributes for the entire row by setting the ALIGN, VALIGN, BGCOLOR and BACKGROUND attributes in the row tag, these settings will override the settings set in the TABLE tag for the current row.

The Table Cell

The individual cell within the table is defined by the <TD> tag. The attributes set in the <TD> tag override all other attribute setting, but only for that individual cell.

The cell is the basic unit of the table and contains the actual data that the table is designed to display.

What Can Go in a Table Cell

Example

The source code for this example is:

<CENTER>
<TABLE CELLPADDING=5 BORDER>
<CAPTION>This is the table caption</CAPTION>
<TR><TH COLSPAN=3>This is the Table header</TH></TR>
<TR BGCOLOR="#ff0000">

<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
<TD>Row 1 Col 3</TD>

</TR>

<TR BGCOLOR="#0000ff">

<TD>Row 2 Col 1</TD>
<TD BGCOLOR="#00ff00">Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>

</TR>

<TR>

<TD>Row 3 Col 1</TD>
<TD>Row 3 Col 2</TD>
<TD>Row 3 Col 3</TD>
</TR>

</TABLE>
</CENTER>

The result looks like this:

This is the table caption

This is the Table header
Row 1 Col 1	Row 1 Col 2	Row 1 Col 3
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3
Row 3 Col 1	Row 3 Col 2	Row 3 Col 3

The Table as a Design Tool

Tables can be used for a variety of purposes other than presenting tabular data. For example, the previous section uses a table that is centered and two cells wide to present the text in a columnar format. The earlier section about Image Maps, uses similar nested tables when dealing with the SHAPE attribute of the AREA tag to produce the columns within a column effect.

A table is the best way to center an image in the browser as in:

<CENTER><TABLE><TR>
<TD> <IMG SRC="URL"> </TD>
</TR></TABLE></CENTER>
In our earlier discussion of Image Maps, I talked about browser specific problems in deciding whether you should use a Client Side or Server Side map. One solution I have seen used to eliminate this problem is to break the image into several components and put them into a table with the setting CELLSPACING=0. With the table cell's ability to span multiple rows and columns, setting the images as hyperlinks can produce the same appearance and effect as an Image Map without the inherent browser problems.

Like tables, frames devide the screen into sections. Unlike tables, however, each individual frame section loads a separate HTML document and can have its own scrollbars.

The concept of frames were first introduced by Netscape with the release of Navigator 2.0 and proposed for inclusion in the standards for HTML 3.0. As of yet they have not been included in the specification and are still being considered. Since frames have not yet been included in the standard, not all browsers will be able to view them.

FRAMESET

Syntax:

<FRAMESET ROWS="RowList" COLS="ColList"> … </FRAMESET>

The FRAMESET tag replaces the BODY tag. No tags that normally go in the BODY container can be placed before the FRAMESET or it will be ignored. The only tags that are allowed inside the FRAMESET container are the FRAME tag or a nested FRAMESET. Either the ROWS or COLS attribute is required, but you cannot use both in the same tag. These attributes devide the screen into rows or columns.

The RowList and ColList work the same way. It is a comma delimited list of numbers that specify the size of the rows or columns. The number of rows or columns is implied by the number of entries in the list. Size can be specified as pixels, percent of the screen size or relative to the remaining screen space. For example:

Some possible combinations

Value	Description
100, 50	Creates one division that is 100 pixels and a second that is 50 pixels. If the numbers do not add up to the total height or width of the screen, the divisions will be proportional to the numbers given. In this case, the first division will be twice the size of the second.
50%, 50%	Creates two divisions that are of equal size.
100, 100, *	Creates three divisions, the first two of which are 100 pixels, the asterisk (*) creates a third that fills the remaining portion of the screen.
200, 50%, *	The first division will be 200 pixels, the second is half the screen size (not half the remaining space), the third division fills all the remaining space.
100, *, 100	This combination creates three divisions with the first and third each being 100 pixels and the second filling all the remaining space.
500, 2*, *	This creates one division that is 500 pixels. The remaining space is divided into a second and third region with the second being twice the size of the third.

FRAME

Syntax:

<FRAME SRC="URL" NAME="FrameName" [ TITLE="FrameTitle" MARGINWIDTH=n MARGINHEIGHT=n SCROLLING="Yes ¦ No ¦ Auto" NORESIZE]>

The FRAME tag is what actually defines the frame set up by the FRAMESET tag.

Attributes
SRC	The URL of the page that is loaded into the frame.
Name	Names the frame so that it can be targeted by an ANCHOR tag (see below).
Title	Gives the frame a title that is separate from the name. This attribute is required for validation.
Marginwidth	Sets the left and right spacing within the frame.
Marginheight	Sets the top and bottom spacing within the frame.
Scrolling	Determines if the frame has a scrollbar. Value Yes Scrollbar is always present No Scrollbar is never present Auto Default. The browser determines when a scrollbar is needed.
Noresize	Normally the user can resize the frame by dragging the border on the screen. This attribute which is not assigned a value, disables that ability.

Targets

Syntax:

<A HREF="URL" TARGET="TargetName">

The TARGET attribute is part of the ANCHOR tag of a hyperlink or of the AREA tag of an Image Map (and a couple of others that we have not discussed). This attribute determines where the linked page is displayed.

Value	Description
Name	This is the name of the frame region that was specified in the FRAME tag. This value will caused the linked page to be displayed in the named frame.
_top	Clears the current framed page and opens the linked page in the entire browser screen.
_self	Default. Causes the linked page to open in the same frame that contains the link.
_parent	In the case of nested frames, this causes the linked page to open in the parent frame. This feature is not supported by MSIE, in which case it will give the same result as _self.
_blank	Opens the linked page in a new browser window.

Noframes

Syntax:

<NOFRAMES> … </NOFRAMES>

The NOFRAMES tag goes after the FRAMESET is closed and contain what the user will see when using a browser that is not compatible with frames.