Platinum Edition Using HTML 4, XML, and Java 1.2:Tables

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Content Summary

Each revision to the HTML standard has shown increasing support for specialized browsers, such as those that are Braille based or speech based. Using these improvements makes your content more accessible to visually-impaired users with text-based or speech-based browsers, and you should look for opportunities to work these new tags and attributes into your HTML documents whenever possible.

HTML 4.0 provides for a SUMMARY attribute of the <TABLE> tag. SUMMARY is set equal to a text string that summarizes the table’s content, purpose, and structure. Non-visual browsers can use this information to better communicate the content of your table to their users.

In the real estate listing table in Figure 6.1, the <TABLE> tag might be modified to include a summary such as

<TABLE SUMMARY=“Real estate listings matching your search criteria,
columns include ID number, address, number of bedrooms, number of
bathrooms, and selling price”>

Background Color

An easy way to add some contrast to your table to make it stand out from the rest of the content on a page is to give the table a background color different from the document’s background color. By adding the BGCOLOR attribute to the <TABLE> tag, you can color the table background with an English-language color name or any RGB hexadecimal triplet, the same as you would specify the document’s background color in the <BODY> tag.



	Determining a desired color’s RGB hexadecimal code is one of the more tedious tasks in Web page authoring. Fortunately, many people have made color resources available on the Web that enable you to choose a color and have the RGB hexadecimal code returned to you. For a wide selection of such sites, point your browser to www.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Color_Information/.
	Also, most HTML authoring programs provide some kind of color selection support. Typically, you can choose a color from a palette presented by the program, and the corresponding RGB hexadecimal code is inserted for you.
	Many browsers also support the use of BGCOLOR in the <TR>, <TD>, and <TH> tags, enabling you to present rows and cells in different colors. One effective use of this technique is to paint the top row of the table (presumably the row containing the column headers) with one background color and the remaining rows with a different color. This further distinguishes the items in the top row as column heads. You can make rows of data stand out by alternating a white and gray background color as well (see Figure 6.3).

Adding a Caption

To put a caption on your table, enclose the caption text between the <CAPTION> and </CAPTION> tags. Captions appear centered over the table and the text may be broken to match the table’s width (see Figure 6.4). You can also use physical style tags to mark up your caption text. The HTML to produce Figure 6.4 follows:

<TABLE>
   <CAPTION><B>Homes for Sale Matching Your Preferences</B></CAPTION>
<TR>    <!-- Row 1 -->
      <TH>ID #</TH>
      <TH>Address</TH>
      <TH>Bedrooms/Bathrooms</TH>
      <TH>Heat/AC</TH>
      <TH>Selling Price</TH>
   </TR>
   <TR>    <!-- Row 2 -->
      <TD>AR-1897-3</TD>
      <TD>1850 North Quincy Street</TD>
      <TD>4 BR, 2 BA</TD>
      <TD>Gas/Central Air</TD>
      <TD>$248,000</TD>
   </TR>
   <TR>    <!-- Row 3 -->
      <TD>AR-9854-22</TD>
      <TD>4614 22nd Street North</TD>
      <TD>3 BR, 2.5 BA</TD>
      <TD>Oil/Central Air</TD>
      <TD>$237,000</TD>
   </TR>
   <TR>    <!-- Row 4 -->
      <TD>AR-5634-7</TD>
      <TD>1022 Glebe Road</TD>
      <TD>5 BR, 2.5 BA</TD>
      <TD>Electric/Central Air</TD>
      <TD>$358,000</TD>
   </TR>
</TABLE>

FIGURE 6.3 Alternating background colors makes individual rows easier to read, particularly when several rows of information are present, as in this code listing.

If you prefer your caption below the table, you can include the ALIGN=BOTTOM attribute in the <CAPTION> tag. You can also left-justify or right-justify your caption by setting ALIGN equal to LEFT or RIGHT, respectively.

FIGURE 6.4 Captions put the contents of your table into context for the reader.


	Put your caption immediately after the <TABLE> tag or immediately before the </TABLE> tag to prevent your caption from unintentionally becoming part of a table row or cell.

Setting the Width

The WIDTH attribute of the <TABLE> tag enables you to specify how wide the table should be in the browser window. You can set WIDTH to a specific number of pixels or to a percentage of the available screen width.

WIDTH is often used to force a table to occupy the entire width of the browser window. If we change the <TABLE> tag in the HTML code in the previous section to

<TABLE WIDTH=100%>

the table is rendered as shown in Figure 6.5. The information is centered in the columns for easier readability. When you compare the table in Figure 6.5 to the one in Figure 6.4, you can see how using the full screen width can enhance the readability of the table.


	Because you can’t know how every user has set his or her screen width, you should set WIDTH equal to a percentage whenever possible. The only exception to this is if the table has to be a certain number of pixels wide to accommodate an image in one of the cells or to achieve a certain layout effect.

Some browsers, such as Netscape Navigator 4 and Internet Explorer 4, support the use of the WIDTH attribute in a <TD> or <TH> tag to control the width of individual columns. The use of WIDTH (as well as HEIGHT) as an attribute of these tags has been deprecated in HTML 4.0, so you should expect to control the size of table cells and headers with style sheets sometime in the near future.

FIGURE 6.5 You have control over how much of the browser screen width a table occupies thanks to the WIDTH attribute.

Table of Contents

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.