|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Cell Heights and Widths By default, a browser chooses cell heights and widths according to a table-generation algorithm, which tries to find an optimal, minimum size for the table. Often, however, an author desires specific control over the layout of the table; for example, he or she may want a particular cell to occupy 50% of the entire table width or a group of columns to all be of the same width. Or, there may be a need for a column with an explicit absolute width, in pixels. Cell widths can, to some degree, be controlled by the WIDTH attribute. This attribute can in principle specify the width in three ways: absolute width (pixels), percentage width (percentage of total table width), and relative width (width relative to other cells in the table). Cell heights are specified by the HEIGHT attribute, which takes as a value the height, in pixels, for the cell. Some examples of the use of these attributes are shown in Figures 6.39 and 6.40. The specification for the allowed values (and their meanings) are:
Figure 6.37 A simple HTML document illustrating table background colors.The rendering by Internet Explorer 4 and Netscape Navigator 4 browsers is shown in Figure 6.38. <HTML><HEAD><TITLE>Test of Table BGCOLOR Properties</TITLE></HEAD> <BODY BGCOLOR=“white”> <TABLE BGCOLOR=“#cccccc” WIDTH=“100%” CELLSPACING=“5” CELLPADDING=“5” BORDER=“0”> <TR ALIGN=“center” VALIGN=“center”> <TD HEIGHT=“40” WIDTH=“33%”> 1 </TD> <TD HEIGHT=“40” WIDTH=“34%”> 2 </TD> <TD HEIGHT=“40” WIDTH=“33%”> 3 </TD> </TR> <TR ALIGN=“center” VALIGN=“center”> <TD HEIGHT=“40” WIDTH=“33%”> 4 </TD> <TD HEIGHT=“40” WIDTH=“34%”> 5 </TD> <TD HEIGHT=“40” WIDTH=“33%”> 6 </TD> </TR> <TR ALIGN=“center” VALIGN=“center”> <TD HEIGHT=“40” WIDTH=“33%”> 7 </TD> <TD HEIGHT=“40” WIDTH=“34%”> </TD> <!-- EMPTY CELL --> <TD HEIGHT=“40” WIDTH=“33%”> 9 </TD> </TR> </TABLE> </BODY></HTML> Advanced Tables—Border Layout Control The HTML development process has proposed several extensions to TABLE s, several of which are implemented on the Internet Explorer 3 and 4 browser. Notable among these extensions are the additional TABLE element attributes FRAME and RULES. FRAME specifies how the external border of the should be rendered (all borders, or only some of them), while RULES specifies how the internal borders between cells should be drawn. The use of these attributes is illustrated in Figures 6.41 and 6.42. The RULES attribute uses structural information about the table to decide where to draw dividing lines—this extra structural information is provided by the TBODY, TFOOT, and THEAD elements, which divide the rows into body rows (the table body), footer rows (the table footer), and header rows (the table header), as well as the COL and COLGROUP elements, which group columns rather than rows. The function of these newer elements is described in the next section. Their use is illustrated in Figures 6.41 and 6.42.
Advanced Tabular Structure In the simple table model, a TABLE contains just TR (table rows) elements and optionally a CAPTION. In the advanced table model, a TABLE instead contains THEAD, TFOOT, and TBODY elements, which in turn group TR elements into a table header (THEAD), body (TBODY), and footer (TFOOT). Also, the TABLE element can contain COL and COLGROUP elements, which define properties, such as cell alignments and/or widths, for individual columns (COL) or groups (COLGROUP) of columns. COL and COLGROUP elements must precede all table rows, headers, or footers, since the program rendering the table must know this column-specific information before it begins formatting the table. These elements are illustrated in the example tables in Figures 6.41 and 6.42. At present these elements are only supported by Internet Explorer 3 and 4—not by Netscape Navigator 4. The THEAD, TFOOT, TBODY, COL, and COLGROUP elements can all take alignment, background color, and other properties to define how the associated cells should be formatted. It is thus important to know how to handle cases where a cell is affected by formatting specifications coming from one or more of these elements. For example, should an alignment specified by a COL element override that specified by a TFOOT? Internet Explorer 4, the only browser to support these elements, uses the following rules:
Figure 6.39 Example tables illustrating use of HEIGHT, WIDTH, ALIGN, and BGCOLOR attributes. The rendering of this document by the Netscape Navigator browser is shown in Figure 6.40. <HTML><HEAD> <TITLE> HTML TABLEs (part 3)</TITLE> </HEAD><BODY> <H2 ALIGN=“center”> Yet More Table Examples</H2> <H3>Simple Table</H3> <TABLE BORDER=2> <TR> <TD>Item 1 <TD>A <TD>Item 3 is much longer than the other items </TR> <TR> <TD>Fred <TD>B <TD>Wilma! </TR> </TABLE> <H3>Same Simple Table with WIDTH, HEIGHT, ALIGN and BGCOLOR</H3> <TABLE BORDER=2> <TR> <TD WIDTH=“20%”>Item 1 <TD WIDTH=“20%”>A <TD WIDTH=“190”>Item 3 is much longer than the other items </TR> <TR> <TD HEIGHT=“80” VALIGN=“top”>Fred <TD ALIGN=“middle” BGCOLOR=“#bbbbbb”>B <TD VALIGN=“bottom”>Wilma! </TR> </TABLE> <H3>Another Simple Table with Table Alignment</H3> <DIV>In this case, the simple table is right-aligned: consequently <TABLE BORDER=0 BGCOLOR=“#dddddd” ALIGN=“right” VSPACE=“5” HSPACE=“5”> <TR> <TD ALIGN=“center”><B><I>NOTE!</I></B> </TR> <TR> <TD>My Dog Has Fleas! </TR> </TABLE> the text flows around the table, just as it can flow around left or right-aligned images. This is very useful for embedding text in the document the text relates with, and is also useful for embedding notes, sidebars, etc. within regular text. </DIV> </BODY> </HTML>
|
|
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.
|
)
)
){kind=link}
){kind=link}