|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Content SummaryEach 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 tables 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 ColorAn 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 documents 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 documents background color in the <BODY> tag.
Adding a CaptionTo 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 tables 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>
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.
Setting the WidthThe 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.
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.
|
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. |