In the old days, Web pages were always a single column of text with the occasional graphic sitting over near the left side of the page. Nowadays, however, you'll be hard pressed to find many pages on the Web that follow this old formulaic layout
pattern. Web page layout and design has become as much of a creative art as its paper page counterpart, and nearly as flexible in the variety of compositions that you can produce.
With tables and frames, you can arrange text, images, and complete Web pages into multiple columns and rows. Both tables and frames were implemented in MS Internet Explorer version 2.0, but have been significantly enhanced in version 3.0. Style sheets
are a more recent addition to HTML, brand new in version 3.0. They enable you to set or change the text and font attributes of an entire document—or hundreds of documents—in one fell swoop. This chapter introduces each of these features in
depth,
using example sites from the Internet Explorer Unleashed CD-ROM to illustrate their use.
The use of tables in HTML documents has constituted one of the most striking developments yet in HTML design and structure. Tabular data, the type customarily seen in the sports pages or in text books, is at its most functional level delimited into
meaningfully organized rows (horizontal) and columns (vertical). The purpose of tabular data (and, of course, the purpose of HTML) is to provide an effective and appealing means of organizing information and enhancing document content. To this end, tables
are extremely useful tools for displaying a wide variety of information that might otherwise be formatted into bland text.
The HTML 3 extensions to the implementation of tables enable authors to exert a great deal of control over the size, placement, and data contained in tables. You will also see how far a little creative energy can go toward using tables for other more
aesthetic effects.
To make tables, you have to start with a <TABLE> tag, and, of course, you end your tables with the </TABLE> tag. If you want the table to have a border, include the BORDER attribute. (There are a number of optional attributes you can
specify
in the <TABLE> tag, but these are discussed after you get the basics under your belt.)
With the <TABLE> tag in place, the next thing you have to have is the <TR> tag. <TR> creates a table row, which contains one or more cells of information. To create these individual cells, you use the <TD> tag. <TD> stands
for table data; you place the table information within the <TD> and </TD> tags. A fourth tag, <TH> is used exactly like <TD>, but is meant to imply that the cell is part of the heading of the table. Because there is no visible
difference between <TD> and <TH> cells, many Web page authors don't use <TH> even where they theoretically should.
You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows. The example in Figure 23.1 shows a simple table using only these three tags, and Listing 23.1 shows the HTML code for this
table.
Figure 23.1. The <TABLE>, <TR>, and <TD> tags are all you need to create simple tables.
Listing 23.1. HTML code for a simple table.
<HTML> <HEAD><TITLE>A Simple Table</TITLE></HEAD> <BODY> <TABLE BORDER> <TR> <TD>Any table cell can contain text...</TD> <TD><IMG SRC="graphics.gif"><BR><IMG SRC="table1.gif"></TD> <TD>...or both text and graphics.<P><IMG SRC="table2.gif"></TD> </TR> </TABLE> </BODY> </HTML>
You can place virtually any other HTML element into a table cell, including images, forms, and other tables. This capability means that you can modify the size of the data in one table cell with the <BIG> and <FONT SIZE> tags. (See Chapter
23, "HTML 3 and Internet Explorer Extensions," for more information on font controls.) Tags used in one cell don't carry over to other cells, however. You must explicitly specify each tag to be used with each cell. In a sense, each cell
functions
as an independent unit of HTML, but with certain limitations. You cannot, for example, apply <BODY> elements to individual table cells in the same way you apply them to entire documents. Netscape's frames feature (discussed later in this chapter
under "Frames") enables you to do such neat tricks, but standard table formatting doesn't.
TIP
You can also use the new HTML style sheets to control almost every aspect of how text appears in various parts of your tables. Style sheets are discussed at the end of this chapter, in the section "Style Sheets."
By default, the size of a table and its individual cells expands to fit the data you place into it. You can, however, override these defaults by assigning specific pixel values to the height and width of the table cells and to the entire table. These
size parameters allow for the most precise placement of images and text within cells.
You can exert more specific control over the size of the entire table by including the WIDTH and HEIGHT attributes in the <TABLE> tag. Additionally, you can control the size of each cell of the table by putting WIDTH and HEIGHT attributes in the
individual <TD> tags. You can specify the WIDTH and HEIGHT attributes as either pixels or percentages. For example, the following is the HTML to make a table 500 pixels wide and 400 pixels high:
<TABLE WIDTH=500 HEIGHT=400>
The HTML code in Listing 23.1 has a BORDER attribute in the <TABLE> tag. This attribute also enables you to modify the exact size of the table border in pixels. A border size of 0 (or leaving the BORDER attribute out entirely) will make the
border
invisible, which is often handy when you are using a table as a page layout tool. You can also choose the color of the borders with the BORDERCOLOR attribute, or even set the dark and light colors of 3-D borders separately with BORDERCOLORLIGHT and
BORDERCOLORDARK. For example, the following would be the HTML to create a table with five-pixel-wide 3-D borders having red highlights and black shadows:
<TABLE BORDER=5 BORDERCOLORLIGHT="red" BORDERCOLORDARK="black">
While you're playing with colors, you'll be happy to discover that you can now give an entire table—and each individual row or cell in a table—its own background, distinct from any background you might use on the Web page itself. You do this
by placing a BGCOLOR or BACKGROUND attribute in the <TABLE>, <TR>, or <TD> tags exactly as you would in the <BODY> tag (see Chapter 23). To give an entire table a yellow background, for example, you would use <TABLE
BGCOLOR="yellow">.
You can also control the space around the borders of a table with the CELLPADDING and CELLSPACING attributes. The CELLSPACING attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The CELLPADDING
attribute sets the amount of space around the edges of information in the cells. Setting the CELLPADDING value to zero causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders.
CELLPADDING and CELLSPACING give you good overall control of the table's appearance.
You can see the effect of the border colors, background, and spacing attributes by comparing Figures 23.2 and 23.3. Figure 23.2 has the default gray border colors, and no cell spacing or padding. Figure 23.3 has a 3-pixel-wide white border, with 10
pixels of cell padding. You could get the same look as in Figure 23.3 by making the border invisible and using 3 pixels of cell spacing.
Figure 23.2. This table uses the default colors and spacing.
These two figures obviously also include a number of other tags and attributes that will be discussed shortly. As you read about the tags and attributes used to turn the simple table into the fancy one, you can refer to the HTML source code for these
two tables in Listings 23.2 and 23.3.
Listing 23.2. The HTML code for the simple table in Figure 23.2, including a caption.
<HTML>
<HEAD>
<TITLE>Tabula Rasa</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION VALIGN="bottom" ALIGN="right"><FONT SIZE=2>
<I>Tabula Rasa, Inc. is a wholely owned subsidiary of
the Cosa Nostra Furnishings Corporation.</I></FONT></CAPTION>
<TR>
<TD></TD>
<TD><IMG SRC="tabula.gif"></TD>
<TD><H1>Tabula Rasa, Inc.</H1><B>Antique tables for the modern home</B></TD>
</TR>
<TR>
<TD></TD>
<TD><I>Product</I></TD>
<TD><I>Description</I></TD>
<TD><I>Price</I></TD>
</TR>
<TR>
<TD><IMG SRC="table1.gif"></TD>
<TD><H2>Tabula Suprema</H2></TD>
<TD>A classic ornamental dining table
to take you back to a more refined age.</TD>
<TD><H2>$795</H2></TD>
</TR>
<TR>
<TD><IMG SRC="table2.gif"></TD>
<TD><H2>Tabula Allegro</H2></TD>
<TD>Sophistication underneath, with ample room for
bounty on top. Gather the family!</TD>
<TD><H2>$675</H2></TD>
</TR>
<TR>
<TD><IMG SRC="table3.gif"></TD>
<TD><H2>Tabula El-Cheapo</H2></TD>
<TD>Imminently practical, with folding ends and tasteful ornamentation.</TD>
<TD><H2>$295</H2></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Listing 23.3. The HTML code for the enhanced table in Figure 23.3.
<HTML>
<HEAD>
<TITLE>Tabula Rasa</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 BORDERCOLOR="white" CELLPADDING=10>
<TR>
<TD></TD>
<TD COLSPAN=3 BACKGROUND="scratch2.gif">
<IMG SRC="tabula.gif" ALIGN="left">
<CENTER>
<FONT COLOR="#800000">
<H1>Tabula Rasa, Inc.</H1>
<B>Antique tables for the modern home</B>
</FONT>
</CENTER>
</TD>
</TR>
<TR VALIGN="top">
<TD></TD>
<TD BACKGROUND="scratch2.gif"><I>Product</I></TD>
<TD BACKGROUND="scratch2.gif"><I>Description</I></TD>
<TD BACKGROUND="scratch2.gif"><I>Price</I></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table1.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula Suprema</H2></TD>
<TD BACKGROUND="scratch.gif">A classic ornamental dining
table to take you back to a more refined age.</TD>
<TD BACKGROUND="scratch.gif"><H2>$795</H2></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table2.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula Allegro</H2></TD>
<TD BACKGROUND="scratch.gif">Sophistication underneath,
with ample room for bounty on top. Gather the family!</TD>
<TD BACKGROUND="scratch.gif"><H2>$675</H2></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table3.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula El-Cheapo</H2></TD>
<TD BACKGROUND="scratch.gif">Imminently practical, with folding
ends and tasteful ornamentation.</TD>
<TD BACKGROUND="scratch.gif"><H2>$295</H2></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tables can include a caption, specified within the table by the <CAPTION> tag. By default, the <CAPTION> information is placed at the top of the table, but, as with everything else in HTML, you can change it. You can put the caption at the
bottom of the table by specifying <CAPTION VALIGN="BOTTOM">. You can also include an ALIGN="left", ALIGN="right", or ALIGN="center" attribute to determine where the caption is positioned horizontally. The
<CAPTION> tag is optional and can contain any HTML information (text and images, for example). The <CAPTION> tag can be very useful for placing information about the table exactly above or below the table without the hassle of aligning the
text
yourself. Figure 23.2 includes a bottom-right aligned caption, and Figure 23.5 (later in this chapter) includes a bottom-left aligned caption.
By default, anything you place inside a table cell is aligned to the left and vertically centered. You can align the contents of table cells both vertically and horizontally with the ALIGN and VALIGN (vertical align) attributes. You can apply these
attributes to either <TR> or <TD> tags. Depending on the size of your table, you can save yourself a considerable amount of time and effort by applying these attributes at the <TR> level and not in each individual <TD> tag.
Alignment attributes assigned to <TR> tags apply to all cells in that row. The HTML code in Listing 23.3 and Figure 23.3 uses VALIGN="top" to bring the text to the top of each cell and VALIGN="bottom" to bring the table images to
the bottom of their cells.
At the top of Figure 23.3, a single cell spans three columns. This is accomplished with the COLSPAN=3 attribute in the <TD> tag for that cell. As you might guess, you can also use the ROWSPAN attribute to create a cell that spans more than one
row. The table shown in Figure 23.5 a bit later in this chapter includes a cell that uses <TD ROWSPAN=2> to span two rows.
TIP
Keeping table structure and these advanced table elements organized in your mind can be the most difficult part of creating complex tables, especially because the tiniest error can throw the whole thing into disarray.
Figure 23.2 (the simple table discussed earlier) demonstrates the odd things that can happen if you aren't careful to make sure your rows and columns all "add up." The first row includes only three cells, whereas the rest of the table includes four columns in each row. This causes the border around the end of that row to render improperly, and might cause more serious problems in some browsers. A quick fix for this problem would be to include a COLSPAN=2 attribute in the <TD> tag for the offending cell—or you could just add an empty cell at the end of the row. The best solution, though, is to include the image and title in the same cell, and make it span three columns as shown in Figure 23.3.
Using tables can be frustrating, and their limitations become apparent when you try to do something like the effect in Figure 23.4 to the table document created earlier in the chapter.
Figure 23.4. An "impossible" modification to the document shown in Figure 23.3.
Impossible, you say? Theoretically, it seems like you should be able to place tables within HTML documents the same way you place images, and you should therefore be able to wrap text around tables and incorporate them into your formatting with the
same
flexibility images allow. Unfortunately, tables must take up all available space from left to right, and do not allow the placement of text or images on either side.
The illustration in Figure 23.4 is possible, however, if you use nested tables. Nested tables permit an entire table to be placed within another table. That is, you can place an entire table within a table cell, and that separate table
can
possess any and all the qualities of any table you might want to create.
Listing 23.4 contains the code for the example in Figure 23.4.
Listing 23.4. HTML code for nested tables.
<HTML>
<HEAD>
<TITLE>Tabula Rasa</TITLE>
</HEAD>
<BODY>
<TABLE CELLPADDING=10>
<TR><TD>
<!-- Nested table begins here -->
<TABLE BORDER=2 BORDERCOLOR="black" CELLPADDING=10>
<TR>
<TD COLSPAN=4 BACKGROUND="scratch2.gif">
<IMG SRC="tabula.gif" ALIGN="left">
<CENTER>
<FONT COLOR="#800000">
<H1>Tabula Rasa, Inc.</H1>
<B>Antique tables for the modern home</B>
</FONT>
</CENTER>
</TD>
</TR>
<TR VALIGN="top">
<TD BACKGROUND="scratch2.gif"><I>Product</I></TD>
<TD BACKGROUND="scratch2.gif"><I>Name</I></TD>
<TD BACKGROUND="scratch2.gif"><I>Description</I></TD>
<TD BACKGROUND="scratch2.gif"><I>Price</I></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table1.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula Suprema</H2></TD>
<TD BACKGROUND="scratch.gif">A classic ornamental dining table
to take you back to a more refined age.</TD>
<TD BACKGROUND="scratch.gif"><H2>$795</H2></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table2.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula Allegro</H2></TD>
<TD BACKGROUND="scratch.gif">Sophistication underneath, with
ample room for bounty on top. Gather the family!</TD>
<TD BACKGROUND="scratch.gif"><H2>$675</H2></TD>
</TR>
<TR VALIGN="top">
<TD HEIGHT=110 VALIGN="bottom"><IMG SRC="table3.gif"></TD>
<TD BACKGROUND="scratch.gif"><H2>Tabula El-Cheapo</H2></TD>
<TD BACKGROUND="scratch.gif">Imminently practical, with folding
ends and tasteful ornamentation.</TD>
<TD BACKGROUND="scratch.gif"><H2>$295</H2></TD>
</TR>
</TABLE>
<!-- End of nested table -->
</TD>
<TD>
At Tabula Rasa, our mission is to locate and restore the most beautiful
tables in the world and sell them to you at prices that will make you smile.
If you put one of our tables in your dining room, then you can eat on it.
Or if you don't want to get it dirty, you could just put a vase with some
flowers on it. Or if you don't want to risk scratching it with a vase,
you could just throw a pretty tablecloth over it and eat in front of the TV
in the other room. In any case, guests and relatives are sure to comment on
your refined taste and obscene wealth when they see your new antique table,
and you sure can't beat that feeling.<P>
So enough chit-chat. The bottom line is: You buy a table, or we have our
boys pay a little visit to your house once or twice a week for the rest of
your life. And trust me, these guys are not vacuum salesmen. So hand over
the credit card and let's get this over with. You'll be glad you did.
We guarantee it.<P>
<I>Tabula Rasa is a wholely owned subsidiary of Cosa Nostra Furnishings Inc.</I>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Take note of exactly what I did here. I took the table that I had already created in the earlier example and did not modify it at all. I then surrounded that table with another table. You can nest tables indefinitely, and the effect of, say, seven
tables with fat borders can be very strange indeed.
The proposed HTML 3.x standard introduces several new table tags, which are supported (in their current, unofficial "standard" form) by Internet Explorer 3.0. The primary practical uses of these extensions are to exert greater control
over where borders are placed in and around a table, and to prepare the ground for some advanced features that Internet Explorer does not yet offer, such as tables with their own scroll bars.
NOTE
Because the HTML 3 table extensions discussed here are not yet supported by any browser other than Internet Explorer, and because they do not provide very crucial functionality, you might want to wait until later to start using them. However, browsers that don't support these extensions will simply ignore them and still display the tables just fine, so there is no harm in trying them out.
HTML 3 enables you to define the heading, main body, and footer with three new table tags: <THEAD>, <TBODY>, and <TFOOT>. These tags do not require closing tags (such as </THEAD>) because a browser always knows that the header
ends when it encounters either a <TBODY> tag, a <TFOOT> tag, or the end of the table. These tags are entirely optional, and currently have no effect at all unless you use the <TABLE FRAMES> attribute mentioned in the next section.
In the future, browsers might implement scrolling tables where the THEAD and TFOOT area remain in place while you scroll through the TBODY section with a scroll bar. However, as of this writing this functionality is not yet present in Internet Explorer
or any other browser, so using these tags by themselves have no visible consequences. Forward-looking Web authors who use these tags now should also get in the habit of using <TH> tags within the THEAD section, and using <TD> only in the TBODY
and TFOOT sections of a table.
The new FRAME and RULES attributes of the <TABLE> tag enable you to turn on and off the outside border, vertical lines, and horizontal lines for a table separately.
NOTE
The FRAME attribute discussed here has nothing to do with the <FRAME> and <FRAMESET> tags discussed later in this chapter.
FRAME controls the outside borders of a table, and can have any one of the following values:
| void | No outside borders |
| above | Top border only |
| below | Bottom border only |
| hsides | Top and bottom borders only |
| lhs | Left-side border only |
| rhs | Right-side border only |
| vsides | Left and right borders only |
| box | All outside borders |
RULES controls the inside borders of a table, and can have any one of the following values:
| none | No interior borders |
| basic | Horizontal borders between <THEAD>, <TBODY>, and <TFOOT> only (see the explanation of these tags earlier in this section) |
| rows | Horizontal borders between rows only |
| cols | Vertical borders between columns only |
| all | Both horizontal and vertical interior borders |
For example, to create a table surrounded by an exterior box, but with only vertical column separators and no horizontal lines between rows, you would write the following:
<TABLE FRAME="box" RULES="cols">
NOTE
According to the proposed HTML standard, FRAME and RULES will work only in tables that also include at least one of the <THEAD>, <TBODY>, or <TFOOT> tags. This is a bit silly, because only RULES="basic" would logically need to see these tags to work correctly, and the same standard proposal allows omission of the <TBODY> tag if there is no header or footer in a table. It's very likely that most browsers will let you break this rule and use FRAME and RULES without using <THEAD>, <TBODY>, and <TFOOT>. But you probably ought to know about it, anyway.
The final HTML 3 table extension currently supported in Internet Explorer 3.0 is column grouping and alignment.
NOTE
The <COL> and <COLGROUP> tags used for column grouping are not yet fully implemented in Internet Explorer, and the standard specification itself might in fact still be open to revision. The following paragraphs give you a general idea of how these tags are to be used, but please refer to the Microsoft (http://www.microsoft.com) and W3C (http://www.w3.org/pub/WWW/TR/) Web sites for current information before using these tags in your Web pages.
At the beginning of a table, you can now optionally describe the structure of the columns in the table. The purpose of this is to indicate ahead of time how wide each column should be and what type of text alignment each column will use. This saves you
from having to specify this information over and over again in every cell, and also enables Internet Explorer to display the table faster because it doesn't have to load the entire table to figure this information out.
The <COL> tag indicates a column, and is almost always used with the WIDTH attribute to specify the width of the column. You can either specify a width in pixels or you can put an asterisk (*) next to a number to specify a "relative
width" as compared to the other columns. If you use relative widths, the actual width is decided by the browser when the table is displayed. The following is an example of relative width:
<COL WIDTH="2*">This column is twice as wide...</COL> <COL WIDTH="1*">..as this one.</COL>
The <COL> tag can also take an ALIGN attribute, which indicates that the text in the column will be aligned either to the left, right, center, or tells the browser to justify the text flush with both margins.
A single <COL> tag can actually specify properties of several columns if you want those columns to all have the same properties. You do this with the SPAN attribute, which indicates the number of columns to which the <COL> tag refers. For
example, to right-justify four columns of equal width, use the following line:
<COL WIDTH="1*" SPAN=4>
You define a group of columns by enclosing some <COL> tags within the <COLGROUP> and </COLGROUP> tags. Why would you want to do such a thing? Because <COLGROUP> can take newly enhanced ALIGN and VALIGN attributes that give you
easier and more flexible text formatting control than you would have any other way. You can apply the same ALIGN values that are used with <COL> to groups of columns all at once with <COLGROUP>, which can save a lot of typing for tables with a
lot of columns. Even more promising, you can specify <COLGROUP VALIGN="baseline"> to align the baselines of all text within a group of columns. Or you can use VALIGN="bottom", VALIGN="middle", or VALIGN="top"
to align the text in the column group accordingly.
Note that the <COL> and <COLGROUP> tags do not require closing </COL> and </COLGROUP> tags if they are used in a context where the closing is clearly implied, such as the following:
<TABLE> <COLGROUP ALIGN="left" VALIGN="baseline"> <COL WIDTH="30"> <COL WIDTH="50"> <COLGROUP ALIGN="left" VALIGN="top"> <COL WIDTH="2*"> <COL WIDTH="1*"> <COL WIDTH="0.5*"> <TR> ...etc...
There are several other attributes for <COL> and <COLGROUP> defined in the proposed specification, but not implemented in Internet Explorer as of this writing. I recommend against using <COL> and <COLGROUP> until a future
version
of Internet Explorer, but if you do require the new justify and baseline alignment options it provides, check the Web authoring area of Microsoft's Web site to find out exactly how the final release version of Internet Explorer 3.0 is currently
interpreting these tags.
Hyperlinked documents by their nature take plain text for quite a ride, and tables go well beyond standard HTML formatting. Frames take the HTML interface further still.
One major limitation of HTML in the old days was that you could see only one page at a time. Frames overcame this limitation by dividing the browser window into multiple HTML documents. Each frame contains an individual document that can function
independently of the other frames. This feature gives tabular data (which was already a vast improvement over generically formatted text) a livelier and more interactive presence.
Additionally, you can create documents in which one frame contains a set of links that point to another target frame. In other words, one frame can remain constant, displaying a table of contents or some other important information, and the content of
the other frames can change based on which links you follow.
NOTE
Microsoft Internet Explorer and Netscape Navigator are currently the only browsers implementing frames, but the open-ended frames specification has been submitted to the Internet Standards committees for inclusion in the HTML standards' next release. Nearly all Web browsers are likely to support frames in their next major release.
If you are already familiar with tables, understanding frames should not be much of a stretch. Indeed, many of the elements that make tables so flexible are present in frames in precisely the same capacity.
The easiest and simplest way to use frames is also the newest: floating frames let you embed one Web page into another. The <FRAME> tag works just like the <IMG> tag, except that the SRC can be an HTML document. For example,
you could place the Microsoft home page in a 400x400-pixel area on one of your own Web pages like this:
<FRAME SRC="http://www.microsoft.com/" WIDTH=400 HEIGHT=400>
This area would have its own little scrollbar, and any links that the user clicks within the frame will display their corresponding documents within the frame without changing the main page at all. You can even use the standard IMG ALIGN attribute to
center the frame or wrap text around it.
The real fun begins when you give a frame a name with the <FRAME NAME> attribute. You can then make any link on the page change the contents of that frame using only the <A TARGET> attribute. For example, the page in Figure 23.5 includes
the
following tag in the upper-left cell of the table:
<FRAME SRC="tabula.gif" NAME="picture">
This displays the tabula.gif image in that cell when the page loads. Each of the product names is a link that displays an image of the corresponding table in the frame named "picture", like the following:
<A HREF="table1.gif" TARGET="picture"><H2>Tabula Suprema</H2></A>
When the user clicks one of these links, the picture immediately appears in the frame without any reloading of the main page (see Figure 23.6).
To accomplish this sort of interactivity before the invention of floating frames, you would have had to use complex programming or scripting languages. Now you can do it as easily as placing any other image on the page!
In addition to the attributes discussed so far, the <FRAME> tag can take the following special frame-related attributes:
There are two additional attributes for the <FRAME> tag that are used only in frameset documents, as discussed in the following section.
A document can contain only frames, with no "main page" except the contents of the frames themselves. (In fact, this use of frames predates floating frames.) Documents in which the frames entirely cover the Internet Explorer window are called
frameset documents because they are created with the <FRAMESET> tag.
Because a frameset document has no content, it also doesn't contain a <BODY> tag—there is no body to be tagged! There are only frame format settings that determine the shape and placement of the documents. Figure 23.7 and Listing 23.5 show a
simple frameset example, the syrup.htm page from the CD-ROM that accompanies this book.
Listing 23.5. The frameset document in Figure 23.7 simply defines the placement of the frames and where to find their contents.
<HTML><HEAD><TITLE>Maple Syrup from Sandiwood Farm</TITLE></HEAD>
<FRAMESET ROWS="80,*,80">
<FRAME SRC="banner.htm" NAME="top"
FRAMEBORDER=NO FRAMESPACING=0 SCROLLING=NO MARGINHEIGHT=4 MARGINWIDTH=4>
<FRAMESET COLS="80,*,80">
<FRAME SRC="side.htm" NAME="left" FRAMEBORDER=NO FRAMESPACING=0>
<FRAME SRC="main.htm" NAME="main" FRAMEBORDER=NO FRAMESPACING=0>
<FRAME SRC="side.htm" NAME="right" FRAMEBORDER=NO FRAMESPACING=0>
</FRAMESET>
<FRAME SRC="bottom.htm" NAME="bottom"
FRAMEBORDER=NO FRAMESPACING=0 MARGINHEIGHT=4 MARGINWIDTH=4>
</FRAMESET>
</HTML>
In Listing 23.5, instead of a <BODY> tag, there is a <FRAMESET> tag. No tags that would normally be contained in a <BODY> tag can be within the <FRAMESET> tag. Remember that you are creating only the framework in which your
pre-existing HTML documents (which contain their own <BODY> elements and HTML markup) will be presented.
To open a <FRAMESET> tag, the rows and columns and their sizes (either relative or precise) must be stated in the <FRAMESET> statement. Therefore, the two possible attributes supported within the <FRAMESET> tag are ROWS and COLS. You
can specify the sizes of ROWS and COLS either as precise pixel values or as percentages of the total size of the browser window. You can also use an asterisk (*) to tell Internet Explorer that this frame should fill whatever space is available in the
window. If more than one frame has an * value, the remaining space will be allotted equally between them.
In Listing 23.5, <FRAMESET ROWS="80,*,80"> means to split the window vertically into three frames. The top and bottom frames will be exactly 80 pixels tall, and the middle frame will take up all the remaining space in the window. The
top
frame contains the document banner.htm, and the bottom frame contains bottom.htm.
The middle frame is an example of a nested frame—it contains a FRAMESET that is itself split into three frames horizontally. These contain the documents side.htm, main.htm, and another copy of side.htm.
TIP
Because users can run Internet Explorer in any size window, it is usually safest to use percentages rather than exact pixel values to dictate the size of the rows and columns.
An exception to this rule would be when you want a frame to contain a single image of a certain size; then you would specify that size in pixels and add a few pixels for the frame borders. This is the case in Figure 23.7 and Listing 23.5, where the background images for the "boards" are exactly 80 pixels thick.
In any case, if you specify any frame size in pixels, there must also be at least one frame in the same frameset with a variable (*) width so that the document can be displayed in any size window.
How do you code these individual frame documents? You don't really have to do anything special for a frame document. If you told the main frameset document to point to pre-existing HTML files, those files are wrapped and reset as needed to fit them
into
the shape of the frame you created. However, it is still a good idea to create documents specially for the frames with the reduced display area for each frame in mind.
Within the <FRAMESET> and </FRAMESET> tags, you should have a <FRAME> tag indicating which HTML document to display in each frame. (If you have fewer <FRAME> tags than the number of frames defined in the <FRAMESET> tag,
any
remaining frames will be left blank.) You don't need to specify a closing </FRAME> tag.
As with floating frames, the FRAME SRC attribute tells which document to load. Frame SRC files are usually the URL addresses of HTML documents, but they could also be an image or any other displayable document. NAME lets you give the frame a name so
that other frames can target it in their links. For example, the center frame in Figure 23.7 is named "main". The TARGET="main" attribute in the following link in the bottom.htm document causes the makeit.htm document to pop up in the
center frame, even though the link itself is in the bottom frame (see Figure 23.8):
<A HREF="makeit.htm" TARGET="main">See us make it</A>
TIP
When you include the TARGET attribute in a link (as discussed previously under "Targeted Frames"), you can use a few special frame names in additional to the names you have defined with FRAME NAME.
- _blank loads the link into a new, unnamed window.
- _self loads the link into the current frame, replacing the document now being displayed in this frame.
- _top loads the link into the entire Netscape window.
- _parent loads the link over the parent frame if the current frame is nested within other frames (this name is the same as _top unless the frames are nested more than one level deep).
Note that all other names beginning with an underscore (_) will be ignored.
All the other attributes mentioned earlier under "Floating Frames" also work with frameset frames in the same way. There are two attributes, however, that can be included in the <FRAME> tag only when it occurs within a
<FRAMESET>. These are NORESIZE and FRAMESPACING.
By default, users can resize individual frames so that they fit more efficiently onto their screens by grabbing and moving the borders between any two frames. You can prevent a frame from being resized by including the NORESIZE attribute in a
<FRAME> tag. Note that this attribute might prevent adjacent frames from being resized as well, and cannot be used for floating frames.
The FRAMESPACING attribute lets you specify the number of pixels between frames in a frameset in pixels.
Because so many browsers still do not support frames, it is probably wise to include alternative content within the <NOFRAME> tag. Users with browsers that don't support frames can then access something, even just a note recommending that people
get either Microsoft or Netscape's browser to see the frames. Internet Explorer and all other browsers that support frames will ignore anything within the <NOFRAME> tag.
Style sheets are without a doubt the Next Big Thing in the fast-paced world of the Web. The concept is simple: You create a single "style sheet" document that specifies the fonts, colors, backgrounds, and other characteristics that establish
a
unique "look." Then you link every page that should have that "look" to the style sheet, instead of specifying all those style elements over and over again in each document separately. Then when you decide to change your official
corporate typeface or color scheme, you can modify all your Web pages at once just by changing one or two style sheets.
If style sheets accomplished this and nothing else, they'd save millions of dollars worth of Webmasters' time and become an integral part of most Web publishing projects. But they aim to do this and much more as well. The proposed HTML style sheet
standard enables Web authors to set a great number of formatting characteristics that it was never possible to modify before with any amount of effort. These include exacting typeface controls, letter and line spacing, margins and page borders, and
expanded support for non-European languages and characters. They also enable sizes and other measurements to be specified in familiar units such as inches, millimeters, and picas.
In short, style sheets bring the sophistication level of paper-oriented publishing to the Web. And they do so—you'll pardon the expression—"with style."
Despite their intimidating power, style sheets can be very simple to create. Consider the documents shown earlier in Figures 23.7 and 23.8. These documents share several properties that could be put into a common style sheet.
Here is how an HTML style sheet that specified these properties would look:
BODY {font: 12pt Lucida Handwriting;
color: #800000;
background: url(paper.JPG) #E0E080}
H1 {font: 18pt Lucida Handwriting}
H2 {font: 14pt Lucida Handwriting}
The first thing you'll undoubtedly notice about this style sheet is that it doesn't look anything like normal HTML. Style-sheet specifications are really a separate language in and of themselves.
Of course, there are some familiar HTML tags in there. As you might guess, BODY, H1, and H2 in the style sheet refer to the corresponding tags in the HTML documents to which the style sheet will be applied. In curly braces after each tag name are the
specifications for how all text within that tag should appear.
In this case, all BODY text that isn't within some other tag should be rendering at a size of 12 points, in the Lucida Handwriting font if possible, and with the color #800000. The BODY background should be the image found at the relative URL
paper.JPG—or if no image of that name can be found, the background color should be set to #EOEO80. Any text within H1 or H2 tags should be rendered in Lucida Handwriting at a size of 18 points and 14 points, respectively.
NOTE
The "point sizes" used in the HTML <FONT> tag are not the same as the point sizes specified in style sheets. <FONT SIZE=3> corresponds to approximately 12pt text, <FONT SIZE=1> is about 6pt text, and <FONT SIZE=7> (the maximum size for the FONT tag) is about 24pt text. You can specify font sizes as large as you like with style sheets, although most display devices and printers will not correctly handle fonts over 200 points.
All that remains is to link this style sheet to the HTML documents. You do this by including a <LINK> tag in the <HEAD> section of each document.
<HEAD>
<TITLE>A Very Stylish Page Indeed</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystyle.css">
</HEAD>
This assumes the style sheet was saved under the name mystyle.css in the same directory folder as the document that contains the preceding HTML. Internet Explorer will then give the body and heading text the properties specified in the style sheet,
without the need for any FONT tags or BODY BACKGROUND attribute in the document itself.
In some situations, you might want to specify styles that will be used in only one Web page. You can then enclose a style sheet between <STYLE> and </STYLE> tags and include it in the beginning of an HTML document, between the </HEAD>
and <BODY> tags. No <LINK> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too).
If you want to specify a style for only a small part of a page, you can go one step further and put a STYLE attribute within a <P>, <DIV>, or <SPAN> tag. (<SPAN> and </SPAN> are "dummy" tags that do nothing in
and
of themselves, except specify a range of text to apply any STYLE attributes that you add.)
Here's how a sample STYLE attribute might look:
<P STYLE="color: green">This text is green, but <SPAN STYLE="color: red"> this text is red.</SPAN> Back to green again, but...</P> <P>...now the green is over, and we're back to the default color for this page.
Although the effect of this example could be achieved as easily with the <FONT COLOR> tag, many style specifications have no corresponding HTML tag. Generally, you should avoid inline styles except when there is no way to do what you're after in
HTML and you feel that using an external style sheet would be too cumbersome.
The style sheet standard is actively under development, and the implementation of style sheets in MS Internet Explorer 3.0 is by no means complete. The style specifications currently supported by Internet Explorer are explained in the following list,
but be sure to check Microsoft's Web site (http://www.microsoft.com/) for any late-breaking enhancements and changes in the standard.
The ability to specify these few style properties for many documents at once—or any portion of a document—is already revolutionary. Expect the next version of Internet Explorer (and of other major Web browsers) to take style sheets even
further toward the ideal of online publishing with all the flexibility of traditional publishing tools.
This chapter has introduced three of the most advanced parts of HTML: frames, tables, and style sheets. Chapter 24, "Graphics and Multimedia for Internet Explorer," offers a quick course on how to create and place still images, sounds, video
clips, and animations within your Web pages.
