The AUGN and VAUGN attributes specify the alignment of the cell’s contents. The AUGN attribute is used for horizontal alignment and it can have the value LEFT CENTER or RIGHT. The VAUGN attribute specifies the vertical alignment of the text and it can have the value TOP MIDDLE or BOnOM. The default alignment is LEFT (horizontal alignment) and MIDDLE (vertical alignment).
A great deal of control over the alignment spacing and placement of cell contents within tables translates directly into excellent formatting capability for documents that would not ordinarily be built as tables. In fact in HTML there are some effects you just can’t get (in a practical way) without the effective use of tables
Table Width
All the examples we have looked at so far use the default table width, which is determined by the entries of the individual cells. ITa column contains a very long entry the browser will wrap its contents to make sure that all columns are visible. However “it is possible to specify the width of the entire table with the WIDTH attribute of the <TABLE> tag
The WIDTH attribute can be a value that specifies the table’s width in pixels or as a percentage of the window’s width. The table defined as:
<TABLE WIDTH-50%>
occupies one-half of the window’s width. Unless you center the table with the CENTER attribute, it will be left-alignedin the browser’s window.
The table defined as:
<TABLE WIDTH-200>
will be 200 pixels wide regardless of its contents and or the window’s size. If the window is less than 200 pixels wide part of the table will be invisible. To display the part of the table that’s outside the window you’ll have to use the horizontal scroll bar.
Multiple Row and Multiple Column Cells
Quite often tables don’t contain identically sized rows and columns. Some rows may contain fewer and wider cells than the others and some columns my Span multiple rows. The figures in this section contain tables with peculiar formatting.
Figure 19A shows a table with cells that span multiple columns and rows. These cells use the ROWSPAN and COLSPAN attributes, which let you create really elaborate tables. Both COLSPAN and ROWSPAN appear in between the <TD> and </TD> tags, and they merge the current cell with one or more of its adjacent cells on the Same row (in the case of the COLSP~N attribute) or column (in the
case of the ROWSPAN attribute). The number of adjacent cells to be merged with the current one is the value of the COLSPAN and ROWSPAN attributes.
This table contains cells
that span multiple rows
and columns.
The table in Figure 19.4 was created with the following HTML lines. The only thing I’ve donedifferently here is add the COLSPAN attribute in the appropriate <TD> tags to force some cells of the first row to span two columns and I’ve added the ROWSPAN attribute to force some cells in the first column to span multiple rows. Other than that the new table is as simple as those in the previous examples.
<HlML>
•
<HEAD>
<TITLE>ROWSPAN – COLSPAN Examples</TITLE>
</HEAD>
<BOOY>
<CENTER>
<TABLE BORDER>
<CAPTION><B>ROWSPAN & COLSPAN Demo</B></CAPTION>
<TR>
<TO COLSPAN-2 ~OWSPAN-2 >SQurce:<BR>1991 Census</TD>
<TH COLSPAN-2>Average<~
</TR>
<TR>
<TH>Height</TH>
<TfI>Weight</TH>
</TR>
<TR>
<TH ROWSPAN-2>Gender<jTH>
<TH>Ma1es</TH>
<TD>S.83</TD>
<TD>19S.S</TD>
</TR>
<TR>
<TH>females</TH>
<TD>s-.-i: ~/TD>
<TD>167.8</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Frames
The pages you’ve seen thus far occupy the entire browser window. You can however display multiple documents on a page by using frames. You usually create frames with the <FRAMESET> tag. This approach requires some overhead, So I’ll describe how to create floating frames using the <IFRAME> tag. You can place a floating frame, such as an image anywhere on the page, and a page can have multiple floating frames. The user can’t resize floating frames, but they are quite adequate for the purposes of this chapter and are easier to implement than frames created with the <FRAMESET> tag.
To insert a floating frame on a page, use the followin~ tag:
<IFRAME SRC~url WIDTH-xxx HEIGHT-yyy>
The url variable is the URL of the document to be displayed on the frame arid xxx and yyy are the frame’s. dimensions. To place a floating frame in the middle of a document and display the Sybex home page on it, enter the following lines in an HTML file and then open the file with Internet Explorer:
.<CENTER>
<Hl>Float;ng Frame Example</Hl><BR>
<IFRA~E SRCa”http://www.sybex.com” WIDTH-SOO HEIGHT-300>
</CENTER>
The output of this document is shown in Figure 19.5. (Everything on.the page’ between the <CENTER> and matching </CENTER> tags is centered.)
A fIoating frame displaying
the Sybex home page
The.page in Figure 19.6 was created with a single BTML document that contains two <IFRAME> tags. I specified the contents of each frame with the -attribute and used the <CENTER> tag for their placement on the.
This time the floating frames
of the page FFRAME5.HTM
are nested in another floating
frame. The arrangement
of the frames on this page
doesn’t depend on the
browser’s window size.
Here’s the document FFRAMES.HTM (you will find it in this chapter’s folder
on the CD):
<HTML>
<HEAD>
<TITLE>Floating Frames</TITLE>
</HEAD)
<BODY BGCOLOR=black>
<FONT NAME=’Verdana” COLOR=lightyellow>
<CENTER>
<Hl>Here they are …</Hl>
<H4> … side by side</H4>
<P)
<I FRAME
SRC=’http://home.microsoft.com/’
NAME=”MS’
WIDTH=325
HEIGHT”‘325
SCROLLING-YES
MARGINWIDTH-O
MARGINHEIGHT-O
HSPACE=8>
</IFRAME>
<I FRAME
SRCa’http://home.netscape.com/’
NAME””r/S’
WIDTH-32S
HEIGHT-32S
SCROLLING=YES
MARGINWIDTH-O
MARGINHEIGHT-O
HSPACE”8>
</IFRAME>
</FONT>
</CENTER>
</BODY>
</HTML>
The page in Figure 19.6 may not look as nice on your computer. If the browser’s window isn’t at least 700 pixels wide there will be no room for the two frames to be displayed next to each other and the second frame will appear below the first one. You’d have the same problem if you attempt to display two images next to each other on a narrow window. The solution in this case is to place the images in
adjacent cells of a table without borders. You can do the same with-floating frames Floating frames can be inserted in table cells just like images or text paragraphs
