|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Figure 2.19 HTML document illustrating the table BORDER, CELLPADDING, and CELLSPACING attributes. See Figure 2.20 for an example rendering.
<HTML><HEAD><TITLE>Test of Table Spacings </TITLE></HEAD>
<BODY>
<TABLE BGCOLOR=“yellow”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
<TABLE BGCOLOR=“yellow” CELLPADDING=“8”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
<TABLE BGCOLOR=“yellow” CELLSPACING=“8”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
<TABLE BGCOLOR=“yellow” BORDER=“8”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
<BR>
<TABLE BGCOLOR=“yellow” CELLPADDING=“0” CELLSPACING=“0”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
<BR>
<TABLE BGCOLOR=“yellow” CELLPADDING=“0” CELLSPACING=“0” BORDER=“0”>
<TR>
<TD> </TD> <TD> One </TD> <TD BGCOLOR=“red”> Two! </TD>
</TR><TR BGCOLOR=“#b0b0b0”>
<TD> </TD> <TD> Four </TD> <TD> Yahoo </TD>
</TR>
</TABLE>
</BODY></HTML>
Note also the difference in vertical spacing between adjacent tables: Netscape leaves a space, while Internet Explorer 4 leaves no space. This must be accounted for when designing documents with adjacent tables. If not specified, the default values of CELLPADDING and CELLSPACING are on the order of one or two pixels, depending on the browser. Thus, setting these two quantities to zero should bring the cells into contact with one another, with no intervening space. This works with Internet Explorer, but not Netscape Navigator—Navigator still leaves a small space between the cells and around the table, as illustrated by the fifth table shown in Figure 2.20. This is because Navigator assumes a default “invisible” table border or width “1”, which it inscribes around the entire table and around each cell. By setting BORDER=“0”, as done in the sixth example table, this border can be eliminated, bringing the cells into direct contact. Tiling and Image Using TablesZero–width cell spacings and paddings are used in Figure 2.21 to create a composite image from four image tiles. The table consists of a two–column, two–cell table, with each cell containing one quarter of the total image. The rendered image, shown at the top of Figure 2.22, shows a single picture made up of the four parts, tiled next to one another. Extra space characters inside a table cell can add whitespace to the rendered cell and spoil the image alignment. This is illustrated in the second table in Figures 2.21 and 2.22; note how the space after the bottom–left–hand image causes whitespace to appear inside the rendered table. The DIV Element This example also introduced the DIV element: DIV denotes a block division of a document and can include almost any other element, including paragraphs, tables, and other DIVs. Here, the DIV takes the attribute ALIGN=“center”, which instructs the browser to center–align all content within the DIV. Thus, the enclosed headings are center–aligned on the display, as are the tables within the DIV. Figure 2.21 HTML document illustrating the use of TABLEs to create a composite image. The comment on line 22 marks the line that has extra whitespace inside the table cell. The result is a “broken” tiled image, as shown in Figure 2.22.
<HTML><HEAD><TITLE>Test of Table Spacing –– Image Icons</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=“center”>
<H3>Images In Table</H3>
<TABLE BORDER=“0” CELLPADDING=“0” CELLSPACING=“0”>
<TR><TD><IMG SRC=“top–left.gif”></TD>
<TD><IMG SRC=“top–right.gif”></TD>
</TR>
<TR><TD><IMG SRC=“bottom–left.gif”></TD>
<TD><IMG SRC=“bottom–right.gif”></TD>
</TR>
</TABLE>
<H3>Space Character Inside a TD Cell</H3>
<TABLE BORDER=“0” CELLPADDING=“0” CELLSPACING=“0”>
<TR><TD><IMG SRC=“top–left.gif”></TD>
<TD><IMG SRC=“top–right.gif”></TD>
</TR>
<TR><TD><IMG SRC=“bottom–left.gif”> </TD> <!–– EXTRA SPACE in cell ––>
<TD><IMG SRC=“bottom–right.gif”></TD>
</TR>
</TABLE>
</DIV>
</BODY></HTML>
Table Widths and AlignmentsLast, we look at controlling table widths. By default, a table “grows” to be just as big as required; note how the tables in Figures 2.20 and 2.22 are as small as possible, given their content. However, sometimes we wish to fix the size of the table, either in height or width, while at other times we wish to fix the size of a particular cell (or column) within the table. This is possible, to some degree, through the WIDTH attribute, supported by TABLE, TD, and TH elements. Some browsers also support a HEIGHT attribute for these elements to specify the height of the table or of the cells. This is less widely supported and is not discussed here. The behavior is similar to that of WIDTH—when it works! On the TABLE element, WIDTH specifies the desired width of the table. This can be given as a percentage of the available width, or as a length in pixels. Thus WIDTH=“100%” calls for a table that fully spans the available space.2 Alternatively, the value can be a number, as in WIDTH=“200”. This calls for a table 200 pixels wide. Note, though, that these are only guidelines to the browser—if the table content is too big for the specified table size, the browser will enlarge the table so that the content fits.
|
|
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}