|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Figure 6.33 A second HTML example document illustrating the TABLE elements. Figure 6.34 shows this document as displayed by the NetManage WebSurfer 5 browser.
<HTML><HEAD>
<TITLe> HTML TABLEs (part 2)</TITLE>
</HEAD><BODY>
<H2 ALIGN=“center”> More Table Examples</H2>
<H3>First Example: Images in Tables</H3>
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10>
<TR><TD>
<IMG SRC=“./logo.gif” ALT=“[Information Commons Logo]” ><BR>
</TD><TD>
<H2 ALIGN=“center”>The Information Commons
<BR><EM>at the</EM>
<BR>University of Toronto </H2>
</TD></TR>
</TABLE>
<H3 ALIGN=“center”>Second Example: Text in two columns</H3>
<TABLE CELLPADDING=5>
<TR> <TD>
<P> Here is the first column of text. This could go on, and on, and on
and on, and on, and on, which is to say that I have completely lost any
any sense of what to type for these examples. Oh, I know --
how about throwing in a list:
<UL>
<LI> here’s a nice item
<Li>and here’s another
</UL>
<P> But that’s enough, now for the second column.
</TD><TD>
<P> Here we go with the second column. This column sits nicely next to
the other one, and is separated by the invisible cell border. Cells can
contain all sorts of markup elements, so you can create very sophisticated
things inside these cells, such as:
<H3>Heading</H3>
<P> If a browser does not understand tables, then this will be presented
as
a single page of single-column text: this is one example where things will
still be readable, even if the browser does not understand tables.
</TD></TR>
</TABLE>
</BODY> </HTML>
The last examples are shown in Figures 6.33 and 6.34. These show some convenient uses of tables, such as for boxing images and text and creating double-column text. Although the latter looks quite nice here, just imagine how it would look with a larger font size or a smaller display window! Table Presentation: Borders, Spacings, and Colors The display and rendering of tables can be controlled through several TABLE attributes. The universally supported attributes are BORDER, CELLSPACING, and CELLPADDING, which specify, in pixels, the border width, the cell dividing line width (width between cells), and the padding space within table cells (between the cell content and the cell edges), respectively. Most browsers also support a BGCOLOR attribute, which specifies a background color for the table cells. With Netscape Navigator, this does not change the color of the table border or the space between the cells, which retains the background color of the display. With Internet Explorer, BGCOLOR colors both the cell content and the dividers between the cells. However, Internet Explorer supports some proprietary attributes that can directly control the color of the cell and table borders; these attributes, described later, are not supported by other browsers. Internet Explorer 3/4 and Netscape Navigator 4 also support a (nonstandard) BACKGROUND attribute, which takes a URL value that references an image file—this image is used as a background for the table content. Note, however, that Netscape Navigator 4 tiles each cell with a new copy of the background image, whereas Internet Explorer tiles the entire background of the table. This difference is illustrated in Figures 6.35 and 6.36, which show the rendering, by Netscape Navigator 4 (top) and Internet Explorer 4 (bottom), of a 3-by-3 table with a background image. Note how Internet Explorer tiles the whole background space of the table, while Netscape restarts the tiling within each cell. Note also that Netscape does not tile the background behind the cell borders, and also does not apply background tiling to “empty” cells: The bottom right-hand cell in the HTML table is empty. Figure 6.35 Example document illustrating the TABLE element BACKGROUND attribute. Rendering of this document by Netscape Navigator 4 and Internet Explorer 4 is shown in Figure 6.36. <HTML><HEAD> <TITLE>Test of TABLE BACKGROUND Attribute</TITLE> </HEAD> <BODY BGCOLOR=“white”> <TABLE BACKGROUND=“maptest.gif” WIDTH=“100%” CELLSPACING=“5” CELLPADDING=“5” BORDER=“3”> <TR> <TD HEIGHT=“40” WIDTH=“33%”> <BR> </TD> <TD HEIGHT=“40” WIDTH=“34%”> </TD> <TD HEIGHT=“40” WIDTH=“33%”> </TD> </TR> <TR> <TD HEIGHT=“40”> <BR> </TD> <TD HEIGHT=“40”> </TD> <TD HEIGHT=“40”> </TD> </TR> <TR> <TD HEIGHT=“40”> <BR> </TD> <TD HEIGHT=“40”> </TD> <!-- EMPTY CELL --> <TD HEIGHT=“40”> </TD> </TR> </TABLE> </BODY></HTML>
The HTML 4 specifications recommend against using the BGCOLOR (or BACKGROUND) attributes, and suggests instead that authors use cascading style sheets to specify these properties of tables or table cells. Unfortunately, with Netscape Navigator 4, CSS does not work properly with table elements, so it is best, for the present, to use attributes. Table Cells: Backgrounds and Cell Content Alignment The alignment of data within table cells can be controlled using the ALIGN (horizontal alignment) and VALIGN (vertical alignment) attributes. These attributes are supported by TD and TH elements, as well as TR elements; in the latter case, the alignment is applied to all cells in the row. However, any attribute specified in a TR element can be overridden by a value specified in a TD or TH. Thus you can use TR attributes to describe overall row properties and attributes within each TD or TH to set properties specific to a cell. The allowed values for these elements are described later. The TD and TH elements can also take an optional NOWRAP attribute, which indicates that text lines within a cell may not wrap—the browser cannot introduce line breaks between words. This can cause odd-looking tables and should be used with caution! Most browsers support a BGCOLOR attribute for the TR, TH, and TD elements to specify the background color for a cell or group of cells. In addition, Internet Explorer 3 and Netscape Navigator 4 support a BACKGROUND attribute for specifying a background image for a row (TR) or a table cell (TD and TH). Note, however, that Internet Explorer 4 supports BACKGROUND only for TD and TH, but not TR. A background image or color applied to a specific cell is painted on top of any background image or color set for the row, which is in turn painted on top of any background or color set for the entire table (set in the TABLE element). There are some important differences between the different browser’s renderings of table cell background colors, as illustrated in Figures 6.37 and 6.38. Figure 6.37 contains a simple table with a background color and with no drawn borders (BORDER=“0”). Figure 6.38 shows the rendering of this table by Netscape Navigator 4 and Internet Explorer 4. Note how Netscape does not color the spacing between the cells or the single empty cell (middle of the bottom row), while Internet Explorer does. If you wish to create tables that reproduce the Netscape-style transparent borders, then you must apply the background color to each of the cells and not to the TABLE element.
Internet Explorer 3 and 4 support some proprietary attributes for more refined control of cell border color. These attributes are discussed later in this section.
|
|
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}