|
|
by William Robert Stanek
No doubt you've seen tables in publications, like those used throughout Web Publishing Unleashed, Professional Reference Edition, and you've probably used tables in your own documents as well. Tables are great for organizing and presenting information, so this chapter shows you how to create and effectively use them in your Web pages.
| Note |
Learning the most current information on HTML tables is extremely important. The table model has changed drastically since the original implementation. Consequently, this chapter describes tables as defined in the HTML 3 tables specification (RFC 1942). If you use tables as outlined in this section, your tables will be fully compliant with the HTML 3 tables specification and backward-compatible with HTML 3.2 browsers. Currently, Internet Explorer 3.0 is the only major browser to support most of the elements in the HTML 3 tables specification. The next major upgrades to Netscape Navigator and Internet Explorer should fully support this specification and display your tables precisely as outlined here. However, older browsers can use only attributes defined in their DTDs. Basically, this means your fully HTML 3-compliant tables will look best in a browser fully compliant with the table model. |
Tables are one of the most sought-after features in the HTML specification. In general, tables have a caption and one or more rows of data organized into columns. The columns of data contain individual cells, each of which is either a header or a data set. Although a table can have several levels of headings, all headings serve to identify the data sets in the table's body. Some tables also have footers, used to make annotations within the table. Therefore, tables have three basic parts: header, body, and footer.
After breaking tables into their component parts, developers of the table model looked at how the data in a table should be displayed by browsers-a major concern. Web publishers have no direct control over the size of the window used to display a table, which means table data defined in absolute terms, such as pixels or characters, could easily get obscured or clipped. To avoid this, developers made it possible to define column width in relative terms as well as absolute terms.
Defining a table in relative terms enables you to specify a size that's a percentage of the current window size. The browser displaying the table will size it accordingly, using the currently defined font. The default size for a table is the current window size, so if you don't specify a width for your table, the WIDTH attribute is set to 100 percent. However, tables created with the default sizing use only as much space as they need.
Another item developers of the table model considered is network speed versus table size. Under the original implementation, the entire table had to be downloaded before any part of it could be displayed. On a slow network or with a large table, the wait could be rather long-sometimes longer than a Web user is willing to wait. To alleviate this problem, the current table model allows for incremental downloading of tables if you specify the number of columns and their widths in the beginning table tag <TABLE>.
The table model is dynamic in other ways as well; you can do the following:
This chapter explores both traditional and creative uses for tables. Traditionally, tables are used to organize data sets such as those shown in Figure 6.1. The table shown in that figure is very useful, but tables can be powerful additions to your pages if you can think beyond the bounds of tradition. For example, the Discovery Web site shown in Figure 6.2 uses tables to add creative flair to its home page.
Figure 6.1 : A traditional use of tables.
Figure 6.2 : Adding creative flair to your page with tables.
To build the framework for your table, you need to define its sections, including the header, body, and footer. Just as some of these parts are optional in traditional tables, they are also optional in HTML tables. The only mandatory part of a table is the table body. Each table you create can have one header section, one or more body sections, and one footer section. The most basic components of any table are the columns and rows that make up the table.
You specify the basic components of a table as follows:
<TABLE> <THEAD> Header Information <TBODY> Data Set 1 <TBODY> Data Set 2 <TBODY> . . . <TBODY> Data Set N <TFOOT> Footer Information </TABLE>
Many attributes are used to define what tables look like on the
page and whether the table should be incrementally loaded. The
following attributes are common to most table elements:
| Specifies a subclass for a tag. CLASS is normally used to display a tag in a different style, based on a class type you've specified in a style sheet. | |
| Specifies the direction for text layout. English text is read from left to right, but some Asian languages are read from right to left. Using DIR with the LANG attribute, you can specify the text layout as left to right by setting a value of DIR=LTR or as right to left by setting a value of DIR=RTL. | |
| Labels an element with a keyword. If you activate a hypertext reference containing a keyword that matches the element's ID, the browser jumps to the section of the document containing the ID. | |
| Specifies the language to be used for the element. You can use this attribute with the optional DIR attribute if the language is read from right to left instead of left to right. | |
| Specifies the type of unit for all numeric values in the associated tag. The implied default is UNITS=PIXELS. You can also specify en units with UNITS=EN. |
The table model has advanced significantly since it was first drafted. In many ways, the current model is more flexible and more powerful, mostly because of the control you have over the way tables are used in your documents. Using the many attributes of the <TABLE> tag, you can define precisely where and how tables are displayed on the page. To specify a table, you use the begin and end <TABLE> tags.
Valid attributes for the begin table tag <TABLE> include the following:
CLASS
DIR
ID
LANG
UNITS
BORDER
CELLPADDING
CELLSPACING
COLS
FLOAT
FRAME
RULES
WIDTH
The ID, CLASS, DIR, LANG, and UNITS attributes are used as described earlier; the other attributes have unique uses when applied to the <TABLE> tag.
Creating the border for a table is generally a two-part process. You use the BORDER attribute to specify the width for framing around the table and the FRAME attribute to specify the style of the frame around the table.
You specify the type of framing for a table with these values:
| No frame around the table, the default. | |
| Put a frame only on the top of the table. | |
| Put a frame only on the bottom of the table. | |
| Put a frame on the top and bottom of the table. | |
| Put a frame on the left and right sides of the table. | |
| Put a frame only on the left side of the table. | |
| Put a frame only on the right side of the table. | |
| Put a frame on all four sides of the table. | |
| Put a frame on all four sides of the table, which is the same as the value BOX. |
Although the values FRAME=BORDER and FRAME=BOX mean the same thing, they are used for different purposes. For backwards compatibility, if you insert the attribute BORDER into the <TABLE> tag without a value, such as <TABLE BORDER>, a browser with the table specification assumes you want the table to have a border on all four sides. The browser makes a substitution using the value FRAME=BORDER and interprets <TABLE BORDER> as <TABLE FRAME=BORDER BORDER=implied>.
Similarly, if you specify <TABLE BORDER=0>, as you can under the HTML 3.2 table model, a browser compliant with the table model assumes you want the table to be displayed without a border. The browser interprets <TABLE BORDER=0> as <TABLE FRAME=VOID BORDER=0>. You can use the value FRAME=VOID as a design technique to remove extra white space around the table.
Figure 6.3 shows an example of tables with and without borders. By default, tables do not have a border or frame, which you can see in the first table example. The second table shown in the figure has a 15-pixel border. To set a border for a table, you must specify a width in pixels for the BORDER attribute, such as BORDER=15. Listing 6.1 shows the markup for the sample page.
Figure 6.3 : Tables with and without borders.
Listing 6.1. Table borders.
<html> <head> <title>Frames for Your Tables</title> </head> <body bgcolor="#FFFFFF"> <div align=center> <h2 align=left>A table without a border or frame:</h2> <table> <caption align=top>Cool WWW Technologies</caption> <tr> <td align=center width=50%>HTML</td> <td align=center width=50%>SGML</td></tr> <tr> <td align=center width=50%>VRML</td> <TD align=center width=50%>Java</td></tr> <tr> <td align=center>ActiveX</td> <td align=center>VBScript/JavaScript</td></tr> </table> <h2 align=left>A table with a 15-pixel border</h2> <table border=15> <caption align=top>Cool WWW Technologies</caption> <tr> <td align=center width=50%>HTML</td> <TD align=center width=50%>SGML</td></tr> <tr> <td align=center width=50%>VRML</td> <td align=center width=50%>Java</td></tr> <tr> <td align=center>ActiveX</td> <td align=center>VBScript/JavaScript</td></tr> </table> </div> </body> </html>
Once you set a border for your table, you can define how you want the table to be framed. Figure 6.4 shows the use of framing in tables. The first example uses the default framing, and the second example shows a table with no frame around the border. Listing 6.2 shows the markup for the sample page.
Figure 6.4 : Tables that illustrate framing techniques.
Listing 6.2. Table frames.
<html> <head> <title>Frames for Your Tables 2</title> </head> <body bgcolor="#FFFFFF"> <div align=center> <h2 align=left>A table with default framing:</h2> <table border=5> <caption align=top>HyperText Markup Versions</caption> <tr> <td align=center width=50%>HTML 1.0 </td> <td align=center width=50%>Initial specification</td></tr> <tr> <td align=center width=50%>HTML 2.0 </td> <td align=center width=50%>Developments up to June 1994</td></tr> <tr> <td align=center>HTML 3.2</td> <td align=center>Developments up to May 1996</td></tr> </table> <h2 align=left>A table with FRAME=VOID:</h2> <table border=5 frame=void> <caption align=top>HyperText Markup Versions</caption> <tr> <td align=center width=50%>HTML 1.0 </td> <td align=center width=50%>Initial specification</td></tr> <tr> <td align=center width=50%>HTML 2.0 </td> <td align=center width=50%>Developments up to June 1994</td></tr> <tr> <td align=center>HTML 3.2</td> <td align=center>Developments up to May 1996</td></tr> </table> </div> </body> </html>
For table readability, CELLPADDING and CELLSPACING are the most important attributes you define for the table. CELLPADDING is used to specify the spacing within data cells, and CELLSPACING is used to specify the spacing between data cells. You specify padding and spacing in the current unit, normally pixels.
In Figure 6.5, there is a stark contrast between the two tables. The table without padding or spacing has thin framing with very little space between the cells; it's perfect for cramming a lot of data into a small space. The second table uses the same framing but adds cell padding, which makes the data sets stand out better and improves readability. The markup for the table padding example is in Listing 6.3.
Figure 6.5 : Tables with and without cell padding.
Listing 6.3. Cell padding and spacing.
<html> <head> <title>Using Cell Padding In Your Tables</title> </head> <body bgcolor="#FFFFFF"> <h2>A table without cell padding or spacing:</h2> <table border=5 cellpadding=0 cellspacing=0 width=100%> <tr> <th colspan=5 width=100%>1996 Sales Figures By Region</th></tr> <tr> <th valign=bottom width=20%></th> <th valign=bottom width=20%>L.A.</th> <th valign=bottom width=20%>Chicago</th> <th valign=bottom width=20%>Baltimore</th> <th valign=bottom width=20%>N.Y.</th></tr> <tr> <th width=20%>1st Quarter</th> <td width=20%>156,900</td> <td width=20%>358,900</td> <td width=20%>329,982</td> <td width=20%>690,009</td></tr> <tr> <th width=20%>2nd Quarter</th> <td width=20%>167,878</td> <td width=20%>325,565</td> <td width=20%>356,111</td> <td width=20%>690,708</td></tr> <tr> <th width=20%>3rd Quarter</th> <td width=20%>189,901</td> <td width=20%>367,404</td> <td width=20%>376,205</td> <td width=20%>693,323</td></tr> <tr> <th>4th Quarter</th> <td>201,560</td> <td>365,109</td> <td>399,584</td> <td>694,465</td></tr> </table> <h2>A table with cell padding of 10 pixels:</h2> <table border=5 cellpadding=10 cellspacing=0 width=100%> <tr> <th colspan=5 width=100%>1996 Sales Figures By Region</th></tr> <tr> <th valign=bottom width=20%></th> <th valign=bottom width=20%>L.A.</th> <th valign=bottom width=20%>Chicago</th> <th valign=bottom width=20%>Baltimore</th> <th valign=bottom width=20%>N.Y.</th></tr> <tr> <th width=20%>1st Quarter</th> <td width=20%>156,900</td> <td width=20%>358,900</td> <td width=20%>329,982</td> <td width=20%>690,009</td></tr> <tr> <th width=20%>2nd Quarter</th> <td width=20%>167,878</td> <td width=20%>325,565</td> <td width=20%>356,111</td> <td width=20%>690,708</td></tr> <tr> <th width=20%>3rd Quarter</th> <td width=20%>189,901</td> <td width=20%>367,404</td> <td width=20%>376,205</td> <td width=20%>693,323</td></tr> <tr> <th>4th Quarter</th> <td>201,560</td> <td>365,109</td> <td>399,584</td> <td>694,465</td></tr> </table> </body> </html>
When you create a table with spacing between the cells and no cell padding, you create the unique look shown in Figure 6.6. In the table with cell spacing, each cell is distinct. Listing 6.4 shows the markup for the table spacing example.
Figure 6.6 : Tables with and without cell spacing.
Listing 6.4. Cell spacing.
<html> <head> <title>Using Cell Spacing In Your Tables</title> </head> <body bgcolor="#FFFFFF"> <h2>A table without cell padding or spacing:</h2> <table border=5 cellpadding=0 cellspacing=0 width=100%> <tr> <th colspan=5 width=100%>1996 Sales Figures By Region</th></tr> <tr> <th valign=bottom width=20%></th> <th valign=bottom width=20%>L.A.</th> <th valign=bottom width=20%>Chicago</th> <th valign=bottom width=20%>Baltimore</th> <th valign=bottom width=20%>N.Y.</th></tr> <tr> <th width=20%>1st Quarter</th> <td width=20%>156,900</td> <td width=20%>358,900</td> <td width=20%>329,982</td> <td width=20%>690,009</td></tr> <tr> <th width=20%>2nd Quarter</th> <td width=20%>167,878</td> <td width=20%>325,565</td> <td width=20%>356,111</td> <td width=20%>690,708</td></tr> <tr> <th width=20%>3rd Quarter</th> <td width=20%>189,901</td> <td width=20%>367,404</td> <td width=20%>376,205</td> <td width=20%>693,323</td></tr> <tr> <th>4th Quarter</th> <td>201,560</td> <td>365,109</td> <td>399,584</td> <td>694,465</td></tr> </table> <h2>A table with cell spacing of 10 pixels:</h2> <table border=5 cellpadding=0 cellspacing=10 width=100%> <tr> <th colspan=5 width=100%>1996 Sales Figures By Region</th></tr> <tr> <th valign=bottom width=20%></th> <th valign=bottom width=20%>L.A.</th> <th valign=bottom width=20%>Chicago</th> <th valign=bottom width=20%>Baltimore</th> <th valign=bottom width=20%>N.Y.</th></tr> <tr> <th width=20%>1st Quarter</th> <td width=20%>156,900</td> <td width=20%>358,900</td> <td width=20%>329,982</td> <td width=20%>690,009</td></tr> <tr> <th width=20%>2nd Quarter</th> <td width=20%>167,878</td> <td width=20%>325,565</td> <td width=20%>356,111</td> <td width=20%>690,708</td></tr> <tr> <th width=20%>3rd Quarter</th> <td width=20%>189,901</td> <td width=20%>367,404</td> <td width=20%>376,205</td> <td width=20%>693,323</td></tr> <tr> <th>4th Quarter</th> <td>201,560</td> <td>365,109</td> <td>399,584</td> <td>694,465</td></tr> </table> </body> </html>
The final example in this section combines cell spacing and cell padding. As you can see, a table with lots of spacing and padding is very readable, yet also fills a lot of screen space. Ideally, tables you use in your pages will have the right balance of padding and spacing.
Figure 6.7 : A table with both cell spacing and padding.
The COLS attribute specifies the number of columns in a table and is used by your browser to display the table incrementally as it's received. If you don't specify the number of columns, the browser reads all the table data before displaying any portion of the table.
You can specify a table with four columns as follows:
<TABLE COLS=4>
| Note |
Even if you don't specify a COLS attribute for your table, the table will display just fine. However, the browser won't be able to display the table incrementally. |
Text in your documents can flow around tables. By default, tables are aligned with the left margin, and text flows around the table's right side. You can also align tables with the right margin, which causes text to flow around the table's left side. You set the alignment of your table by using the FLOAT attribute. Values associated with the FLOAT attribute identify where the table floats on the page.
The developers of the table model chose the word float so as not to conflict with the ALIGN attribute used for other purposes in the table model. These are the two values for the FLOAT attribute:
<TABLE FLOAT=LEFT> <TABLE FLOAT=RIGHT>
| Note |
Neither Internet Explorer 3.0 or Netscape Navigator 3.0 supports floating tables. Look for floating table support in future versions of this software. |
The RULES attribute is used to specify the type of horizontal and vertical lines to display within a table. By default, tables have no horizontal or vertical ruling lines separating columns and rows, and it's only when you specify a border or frame for your table that RULES comes into play.
Rules visually separate the parts of the table. You can increase the table's impact by including some type of rules. The default rules value separates all columns and rows with horizontal and verticle rules.
These are the values for the RULES
attribute:
| No horizontal or vertical rules separating rows and columns. | |
| Separate the header, body, and footer elements with a horizontal rule. | |
| Separate all rows in the table with horizontal rules; some browsers may add a thicker line to the header, body, and footer elements. | |
| Separate all columns in the table with vertical rules and add horizontal rules between header, body, and footer elements. | |
| Separate all elements in the table with horizontal and vertical rules. Some browsers may add a thicker line to the header, body, and footer elements. |
Combining cell padding and spacing with various rule settings can create many different looks for your tables. Figure 6.8 shows two sample tables. The first table uses cell spacing and padding but has no rules; the second table uses rules for rows. The markup for the example is in Listing 6.5.
Figure 6.8 : Using rules in your tables.
Listing 6.5. Table rules.
<HTML> <HEAD> <TITLE>Using Rules in Tables</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" LINK="#000000" TEXT="#000000"> <H2>A table with RULES=NONE</H2> <CENTER> <TABLE BORDER=5 RULES=NONE CELLPADDING=5 CELLSPACING=5> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10A.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10B.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10C.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10D.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10E.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10F.gif"></TR> <TR><TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10G.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10H.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10I.gif" </TR> </TABLE> </CENTER> <H2>A table with RULES=ROWS</H2> <CENTER> <TABLE BORDER=5 RULES=ROWS CELLPADDING=5 CELLSPACING=5> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10A.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10B.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10C.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10D.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10E.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10F.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10G.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10H.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10I.gif"> </TR> </TABLE> </CENTER> </BODY> </HTML>
Figure 6.9 shows more examples of using rules in tables. The first table shown in the figure uses the default rule setting, and the second example uses rule for columns. Listing 6.6 is the markup for this example.
Figure 6.9 : More examples of rules in tables.
Listing 6.6. More table rules.
<HTML> <HEAD> <TITLE>Using Rules in Tables 2</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" LINK="#000000" TEXT="#000000"> <H2>A table with default rules</H2> <CENTER> <TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10A.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10B.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10C.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10D.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10E.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10F.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10G.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10H.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10I.gif"> </TR> </TABLE> </CENTER> <H2>A table with RULES=COLS</H2> <CENTER> <TABLE BORDER=5 RULES=COLS CELLPADDING=5 CELLSPACING=5> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10A.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10B.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10C.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10D.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10E.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10F.gif"> </TR> <TR> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10G.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10H.gif"> <TD><IMG HEIGHT="50" WIDTH="100" SRC="BULLETS/BUTT10I.gif"> </TR> </TABLE> </CENTER> </BODY> </HTML>
The WIDTH attribute is used to specify a table's relative or absolute width. The default WIDTH is the current window size. This means if the table exceeds the current window size, it's resized to fit the current window. Figure 6.10 shows a table that would normally exceed the window size, but because the default width is used, the table is resized to fit the window. The second example in the figure shows the same table with a fixed width of 400 pixels.
Figure 6.10: Sizing your tables.
The HTML code for the table example is in Listing 6.7.
Listing 6.7. Table widths.
<html> <head> <title>Using Table Widths</title> </head> <body bgcolor="#FFFFFF"> <div align=center> <h2 align=left>Table with default width</h2> <table border=5 cellpadding=5 cellspacing=5> <caption align=top>Windows Display Modes</caption> <tr> <td>640X480</td> <td>The screen size in widest use. Used by VGA monitors and associated video cards.</td> </tr> <tr> <td>800x600</td> <td>A widely supported screen size but not in wide use.</td> </tr> <tr> <td>1024x768</td> <td>A screen size in wide use on newer computers. Used by SVGA monitors and associated video cards.</td> </tr> <tr> <td>1152x900</td> <td>A screen size for use on newer computers.</td> </tr> <tr> <td>1280x1024</td> <td>A screen size for use on the newest computers.</td> </tr> </table> <h2 align=left>Table with a width of 400 pixels</h2> <table border=5 cellpadding=5 cellspacing=5 width=400> <caption align=top>Windows Display Modes</caption> <tr> <td>640X480</td> <td>The screen size in widest use. Used by VGA monitors and associated video cards.</td> </tr> <tr> <td>800x600</td> <td>A widely supported screen size but not in wide use.</td> </tr> <tr> <td>1024x768</td> <td>A screen size in wide use on newer computers. Used by SVGA monitors and associated video cards.</td> </tr> <tr> <td>1152x900</td> <td>A screen size for use on newer computers.</td> </tr> <tr> <td>1280x1024</td> <td>A screen size for use on the newest computers.</td> </tr> </table> </div> </body> </html>
| Determining the Best Width for Your Table | |
When you design your table, keep in mind that screen sizes vary. Not all readers will view your page using the screen size you are working in. Macintoshes display 72 pixels per inch, and the number of pixels that can be viewed on the screen depends on the screen's size. Monitor sizes vary from as small as 9" diagonal on older Macs to typical sizes of 13" and 14" diagonal-all the way up to 25" or more. The Windows system for determining the number of pixels on the screen is different from the Macintosh system. On Windows systems, these are the common screen sizes: | |
640¥480 | The screen size in widest use. Used by VGA monitors and associated video cards. |
800¥600 | A widely supported screen size but not used as commonly. |
1024¥768 | A screen size in wide use on newer computers. Used by SVGA monitors and associated video cards. |
1152¥900 | A screen size for use on newer computers. |
1280¥1024 | A screen size for use on the newest computers. |
Often, you can use relative widths for your tables, which leaves the sizing of the table in the hands of the readers' browsers. Still, sometimes you need to use an absolute size for your table. For example, if your table contains graphic images, like those used in Figure 1.2, you should use an absolute table size to get a specific result. If you decide to use an absolute size for your table, test your page on other screen or display sizes. Usually, you design your table for the smallest common screen size, such as the popular 640¥480 display mode for Windows systems. | |
You can specify the table width in units or as a percentage of the current window size. Any numeric value is interpreted in the current unit, normally pixels, unless you follow the value by a percent sign to define a relative width. Figure 6.11 shows two tables that use relative sizing. Listing 6.8 shows the markup for the example.
Figure 6.11: More examples of rules in tables.
Listing 6.8. Relative table widths.
<HTML> <HEAD> <TITLE> Using Table Widths</TITLE> </HEAD> <Body BGCOLOR="#FFFFFF"> <DIV ALIGN=CENTER> <H2 ALIGN=LEFT>Table with a relative width of 25%</H2> <TABLE BORDER=6 CELLPADDING=5 CELLSPACING=5 WIDTH=25% . . . </TABLE> <H2 ALIGN=LEFT>Table with a relative width of 50%</H2> <TABLE BORDER=6 CELLPADDING=5 CELLSPACING=5 WIDTH=50%> . . . </TABLE> </DIV> </BODY> </HTML>
After you specify what you want the table's basic components to look like, you might want to add a caption to the table. Captions supply an explanation or description of the data sets in a table. To define a caption, use the begin and end <CAPTION> tags as follows:
<CAPTION>HTML Design Processes</CAPTION>
The table specification gives you some control over the placement
of table captions with the ALIGN
attribute. Used with captions, the ALIGN
attribute has four values:
| Place the caption above the table. | |
| Place the caption below the table. | |
| Place the caption on the left side of the table. | |
| Place the caption on the right side of the table. |
The exact positioning of right- or left-aligned captions is determined by the browser displaying the caption. According to the specification, browsers should try to display the caption so it fits the table's width and height. When Internet Explorer 3.0 displays left- or right-aligned captions, the caption is displayed with the specified alignment above the table, as you can see in Figure 6.12.
Figure 6.12: Aligning captions in your tables.
Generally, the caption tags are placed just after the begin <TABLE> tag as shown in Listing 6.9.
Listing 6.9. Table captions.
<html> <head> <title>Using Table Captions</title> </head> <body bgcolor="#FFFFFF"> <h2>Table with a right-aligned caption</h2> <table border=6 cellpadding=5 cellspacing=5> <caption align=right>Macintosh Displays</caption> <tr><td>Screen Size</td><td>Approximate Display Size</td></tr> <tr><td>13"</td><td>748x562</td></tr> <tr><td>14"</td><td>820x634</td></tr> <tr><td>15"</td><td>892x706</td></tr> </table> <h2>Table with a left aligned caption</h2> <table border=6 cellpadding=5 cellspacing=5> <caption align=left>Macintosh Displays</caption> <tr><td>Screen Size</td><td>Approximate Display Size</td></tr> <tr><td>13"</td><td>748x562</td></tr> <tr><td>14"</td><td>820x634</td></tr> <tr><td>15"</td><td>892x706</td></tr> </table> <h2>Generally, table captions are not in bold, but you can add highlighting if you want to:</h2> <table border=6 cellpadding=5 cellspacing=5> <caption align=top><B>Macintosh Displays</B></caption> <tr><td>Screen Size</td><td>Approximate Display Size</td></tr> <tr><td>13"</td><td>748x562</td></tr> <tr><td>14"</td><td>820x634</td></tr> <tr><td>15"</td><td>892x706</td></tr> </table> </body> </html>
When adding a table caption, keep in mind that the best captions are short and descriptive. One way to make the caption more readable is to use bold type. You can add bold type to a caption placed on the right side of a table as follows:
<CAPTION ALIGN=RIGHT><B>HTML Design Processes</B></CAPTION>
Other attributes you can use with the begin caption tag <CAPTION> include ID, LANG, CLASS, and DIR.
Before you define the rows and individual cells that make up a table, you might want to specify general rules for all the columns in the table. You do this by using the optional <COL> tag.
Generally, if you want to assign an alignment rule to any column in your table, you should assign rules to all the columns in your table. This helps you avoid problems that could happen when you make changes to the table. Therefore, if your table has three columns, your table would have three <COL> tags. The first <COL> tag would apply to the first column of data cells; the second <COL> tag to the second column of data cells; and the third <COL> tag to the third and final column of data cells.
Besides the common attributes defined earlier, you can use these attributes with the <COL> tag:
ALIGN
chAR
chAROFF
VALIGN
WIDTH
SPAN
| Tip |
Don't confuse the <COL> tag with the <COLS> tag. The <COLS> tag is used to specify the number of columns in your table and is used only by browsers during the table's download. The <COL> tag is used to specify the alignment and positioning of text and objects in individual columns. |
You can specify the horizontal alignment of data within a cell by using the ALIGN attribute. For the <COL> tag, you can use these alignment values:
ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER
ALIGN=JUSTIFY
ALIGN=chAR
The default alignment for headings in a table is ALIGN=CENTER, and the default alignment for data sets is ALIGN=LEFT. Aligning data in column cells based on a character-done by using the value ALIGN=chAR-is often useful, especially for numeric values that have decimal points. For a column aligned on a character, you must specify what character to align with by using the chAR attribute. The key to using characters for alignment in cells is to use a unique character. To align a column of cells based on a decimal point, you could use the following:
<COL ALIGN=chAR chAR=.>
With the chAROFF attribute, you can specify an offset for the character you're using for alignment. The offset is a positional value expressed as a percentage of the cell width. The default offset of 50 centers the unique character within the cell, so an offset of 0 aligns your unique character with the left cell wall, and an offset of 100 aligns it with the right cell wall. You should use the chAR and chAROFF attributes only with the ALIGN attribute. Here's an offset to partially right-align the data points, using a percent sign as the unique character:
<COL ALIGN=chAR chAR=% OFFSET=75>
Figure 6.13 shows an example of using horizontal alignment for columns in a table. Listing 6.10 shows the markup for this example.
Figure 6.13: Horizontal alignment for columns.
Listing 6.10. Horizontal column alignment.
<html> <head> <title>Alignment of Cells in a Column</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <h2>Aligning columns of cells</h2> <center> <table border=10 cellpadding=10 cellspacing=10 width=100%> <col align=left> <col align=center> <col align=right> <tr> <td >A left-aligned Column</td> <td>A centered Column</td> <td >A right-aligned Column</td> </tr> <tr> <td >A left-aligned Column</td> <td>A centered Column</td> <td >A right-aligned Column</td> </tr> <tr> <td >A left-aligned Column</td> <td>A centered Column</td> <td >A right-aligned Column</td> </tr> <tr> <td >A left-aligned Column</td> <td>A centered Column</td> <td >A right-aligned Column</td> </tr> <tr> <td >A left-aligned Column</td> <td>A centered Column</td> <td >A right-aligned Column</td> </tr> </table> </center> </body> </html>
You can specify the vertical alignment of data within a cell by using the VALIGN attribute. For the <COL> tag, you can use these alignment values:
VALIGN=TOP
VALIGN=MIDDLE
VALIGN=BOTTOM
VALIGN=BASELINE
The default alignment for headings and data used in tables is VALIGN=MIDDLE. To vertically align the first line of text in all the cells in the same row, you can use the VALIGN=BASELINE. Although the baseline alignment is useful, keep in mind that subsequent lines of text after the first line may not be aligned along a common baseline. Here's how you can align the cells of a column with the bottom of the cell:
<COL VALIGN=BOTTOM>
An example of using vertical alignment for columns in a table is shown in Figure 6.14. Listing 6.11 the markup for this example.
Figure 6.14: Vertical alignment for columns.
Listing 6.11. Vertical column alignment.
<html> <head> <title>Vertical Alignment of Cells </title> </head> <body bgcolor="#000000" text="#FFFFFF"> <H2>Vertical alignment of cells</H2> <center> <table border=5 cellpadding=2 cellspacing=2 width=100%> <col valign=top> <col valign=middle> <col valign=bottom> <tr> <td >A top-aligned cell</td> <td>A middle-aligned cell</td> <td >A bottom-aligned cell</td> </tr> <tr> <td >A top-aligned cell</td> <td>A middle-aligned cell</td> <td >A bottom-aligned cell</td> </tr> <tr> <td >A top-aligned cell</td> <td>A middle-aligned cell</td> <td >A bottom-aligned cell</td> </tr> <tr> <td >A top-aligned cell</td> <td>A middle-aligned cell</td> <td >A bottom-aligned cell</td> </tr> <tr> <td >A top-aligned cell</td> <td>A middle-aligned cell</td> <td >A bottom-aligned cell</td> </tr> </table> </center> </body> </html>
Usually, the attributes assigned to a particular <COL> tag apply to one column in a table, so a four-column table could have up to four <COL> tags to define the attributes for cells associated with each column. Using the SPAN attribute, you can apply assignments in a COL element to two or more columns.
The next example has a partial definition for a table of five columns. Data within the cells of the table's first column is justified and aligned with the top of the cell. Data in the next four columns is defined by the single COL element with the SPAN attribute and is aligned based on the position of the colon character. Here is the sample code:
<TABLE BORDER=5 FLOAT=RIGHT CELLPADDING=5 FRAME=BOX RULES=BASIC COLS=5> <CAPTION ALIGN=LEFT>HTML Design Processes</CAPTION> <COL ALIGN=JUSTIFY VALIGN=TOP> <COL ALIGN=chAR chAR=: chAROFF=25 SPAN=4> . . . </TABLE>
Usually, column width is determined by the number of characters in the first heading or data set in the column. You can override this function by specifying a relative or absolute width for the column with the WIDTH attribute of the <COL> tag. For compatibility with table representation in other table models and particularly in the SGML CALS model, column width doesn't follow the same rules for widths used elsewhere in HTML. You specify absolute widths in the current unit by specifying a value. However, you don't specify the relative column width with the percent sign; instead, you add an asterisk as the value's suffix, as in this example:
<COL WIDTH=0.25*>
The asterisk character used with widths may seem confusing, but it reminds you that the behavior of relative widths for columns is different from other relative widths. The value 0.25 isn't a percentage of the cell size, and the total of your column widths don't need to add up to 100. Rather, the value 0.25 is a weighted factor, compared to the allocated widths for other columns. If you assigned 2.0 units of width to all columns in the table, the column with the value 0.25 would have a width approximately 12.25 percent of the table's total width.
Using relative widths this way is better than using percentages. It saves you the trouble of trying to make sure all your column widths add up to 100 percent of the table width and lets you manipulate an individual column size as needed. This method also enables you to remove or add columns without recomputing percentages for width.
The main sections of any table are the head, body, and foot elements. You define these elements with the following tags:
<THEAD> Table Header </THEAD> <TBODY> Table Body </TBODY> <TFOOT> Table Footer </TFOOT>
The only mandatory part of a table is the body element. Although all tables must include one or more body elements, a table can have only one header section and one footer section. The table model defines a begin and end tag for the head, body, and foot elements. However, the end tags for these elements can generally be omitted. If the table has only body elements, the begin and end body tags can also be omitted, so the minimum table definition could look like this:
<TABLE> . . . </TABLE>
You would place row, column, and cell assignments where the ellipses are. At a minimum, each defined element must contain one row of data. Keep in mind that if you use a head or foot element, you will need to use the appropriate start tags to separate the table's body component. Ideally, browsers use the head, body, and footer elements to display tables smartly. If the table extends beyond the current window, the browser may let the reader scroll through the data sets of the body section while the header and footer sections remain onscreen, or browsers may simply display the header and footer sections with the current page of the table. When the user advances to the next page, the browser would display a header and footer, as appropriate.
The <THEAD>, <TBODY>, and <TFOOT> tags can be used with the following common attributes:
CLASS
DIR
ID
LANG
UNITS
You can also use these alignment attributes:
ALIGN
chAR
chAROFF
VALIGN
The alignment attributes for header, body, and footer sections are used as described in the previous section. By making assignments in the header, body, or footer, you can override the defaults and column assignments you made with the <COL> tag.
The following example shows how the header, body, and footer sections could be added to a table. Note that the header section for the table has vertical and horizontal alignments that override the assignments made with the <COL> tag. Likewise, the footer for the table has vertical and horizontal alignments that override the assignments made with the <COL> tag. If you use a header or footer in your tables, you probably want unique alignment for the data in associated cells. Here's the example:
<TABLE BORDER=5 FLOAT=RIGHT CELLPADDING=5 FRAME=BOX RULES=BASIC COLS=5> <CAPTION ALIGN=LEFT>HTML Design Processes</CAPTION> <COL ALIGN=JUSTIFY VALIGN=TOP> <COL ALIGN=chAR chAR=: chAROFF=25 SPAN=4> <THEAD ALIGN=CENTER VALIGN=MIDDLE> . . . <TBODY> . . . <TBODY> . . . <TBODY> . . . <TFOOT ALIGN=LEFT VALIGN=BOTTOM> </TABLE>
All tables must have one or more rows of data cells. Rows are defined within the header, body, or footer section of a table. Using the <TR> tag, you can define rows for each section your table has. Therefore, a table with one header, two body, and one footer sections would have at least four rows. Generally, only the begin <TR> tag is used in tables, but you can use the optional end </TR> tag if you want to.
Table row tags can be used with the following common attributes:
CLASS
DIR
ID
LANG
UNITS
You can also use these alignment attributes:
ALIGN
chAR
chAROFF
VALIGN
The alignment attributes for table rows are used as described previously. By making assignments in a table row, you can override the defaults, the column assignments you made with the <COL> tag, and the section assignment you made with the <THEAD>, <TBODY>, or <TFOOT> tag. All table rows consist of one or more data cells. No matter what the cells' placement is, they can be defined as header cells or data cells.
The following is an example of row assignments in a table:
<TABLE BORDER=5> <CAPTION ALIGN=LEFT>Adding Rows to Your Table</CAPTION> <THEAD ALIGN=CENTER VALIGN=MIDDLE> <TR> . . . <TBODY> <TR> . . . <TR> . . . <TR> . . . <TBODY> <TR> . . . <TR> . . . <TR> . . . <TBODY> <TR> . . . <TFOOT ALIGN=LEFT> <TR> . . . </TABLE>
The assignments you make at the cell level are for the individual data sets or headings. Data cells contain the numbers, facts, and statements to display in the table.
Using the <TD> tag, you can define data cells. As with the <TR> tag, the end </TD> tag is optional. The default vertical alignment for data cells in tables is VALIGN=MIDDLE, and the default horizontal alignment is ALIGN=LEFT.
Heading cells contain headings for sections, columns, and rows. Using the <TH> tag, you can define heading cells. The end </TH> tag is optional. Text in a heading cell is usually displayed in bold. The default horizontal alignment for heading cells in a table is ALIGN=CENTER, and the default vertical alignment is VALIGN=MIDDLE.
To define cells within a row, you simply insert the cell data into the table after a row assignment, as shown in the following example:
<TABLE BORDER=5 FLOAT=RIGHT CELLPADDING=5 FRAME=BOX RULES=BASIC COLS=5> <CAPTION ALIGN=LEFT>HTML Design Processes</CAPTION> <THEAD ALIGN=CENTER VALIGN=MIDDLE> <TR><TH>Header Cell 1<TH>Header Cell 2<TH>Header Cell 3 <TH>Header Cell 4<TH>Header Cell 5 <TBODY> <TR><TD>Body Row 1 Cell 1<TD>Body Row 1 Cell 2<TD>Body Row 1 Cell 3 <TD>Body Row 1 Cell 4<TD>Body Row 1 Cell 5 <TR><TD>Body Row 2 Cell 1<TD>Body Row 2 Cell 2<TD>Body Row 2 Cell 3 <TD>Body Row 2 Cell 4<TD>Body Row 2 Cell 5 </TABLE>
The definitions for table cells are very dynamic. Table cells use most of the previously defined attributes, including these:
ALIGN
chAR
chAROFF
CLASS
DIR
ID
LANG
UNITS
VALIGN
By making assignments in a table cell, you override the defaults, the column assignments you made with the <COL> tag, the section assignment you made with the <THEAD>, <TBODY>, or <TFOOT> tag, and the row assignment you made with the <TR> tag. Figure 6.15 shows how individual cells can be vertically aligned. Lisitng 6.12 shows the markup for this example.
Figure 6.15: Aligning individual cells in a column.
Listing 6.12. Vertical alignment of cells.
<html> <head> <title>Vertical Alignment of Individual Cells</title> </head> <body bgcolor="#FFFFFF" TEXT="#000000"> <div align=center> <table border=10 cellpadding=5 cellspacing=5 width=100%> <tr> <td valign=top >A top-aligned cell<p> </p> </td> <td >A middle-aligned cell</td> <td valign=bottom >A bottom-aligned cell</td> </tr> <tr> <td valign=top >A top-aligned cell<p> </p></td> <td >A middle-aligned cell</td> <td valign=bottom >A bottom-aligned cell</td> </tr> <tr> <td valign=top >A top-aligned cell<p> </p></td> <td >A middle-aligned cell</td> <td valign=bottom >A bottom-aligned cell</td> </tr> <tr> <td valign=top >A top-aligned cell<p> </p> </td> <td >A middle-aligned cell</td> <td valign=bottom >A bottom-aligned cell</td> </tr> <tr> <td valign=top >A top-aligned cell<p> </p> </td> <td >A middle-aligned cell</td> <td valign=bottom >A bottom-aligned cell</td> </tr> </table> </div> </body> </html>
| Note |
To increase the amount of space table cells occupy, you can insert a paragraph with a non-breaking space, as shown in the previous listing. The code for this is <P> </P>. |
Using the following additional attributes, you can define cells that span multiple columns and rows, disable automatic wrapping of text, and more:
AXIS
AXES
BGCOLOR
COLSPAN
ROWSPAN
NOWRAP
The AXIS and AXES attributes are used to label cells. Using the AXIS attribute, you can label one cell with a keyword; with the AXES attribute, you can label row and header attributes for the cell. The keyword for the row label is separated from the header label by a comma. Values you assign to the AXIS and AXES attributes aren't displayed with the text of your table. Most tables you create don't need these attributes; however, you can use cell labels to represent field names from a database or to help convert table data to other formats.
For example, you could label a cell with these attributes:
<TD AXIS="keyword" AXES="row header keyword, column header keyword">
Internet Explorer enables you to add color to header and data cells with the BGCOLOR attribute. You can add color to a cell with a color name or hexadecimal value, such as
<TH BGCOLOR=WHITE>
or
<TD BGCOLOR=#FF00FF>
The key to using color in your tables is to use it sparingly. You should test the text's readability when used with a color. If the text is unreadable, use the <FONT> tag to change the color of the cell's text:
<TR><TD BGCOLOR=BLUE><FONT COLOR=WHITE>12.5%<TD BGCOLOR=BLUE> <FONT COLOR=WHITE>15.8%<TD BGCOLOR=BLUE><FONT COLOR=YELLOW>28.3%
Using the BACKGROUND attribute, you can also add images to the table backgrounds in Internet Explorer. If you want to use the image as a background for an entire table, place the BACKGROUND attribute in the <TABLE> tag definition, but if you want to use the image as a background for an individual cell, place the BACKGROUND attribute in the <TD> or <TH> tag definition.
Figure 6.16 shows how background images can be used in tables. When you combine unique page colors or backgrounds with a table that has backgrounds, be sure to check the table for readability. The table shown in the figure worked great against a white background. When the background color of the page is changed to black, the color of text on the page needs to be changed to ensure readability of the text. The obvious choice is to change the text color to white. White text on a black background is easy to read. However, white text creates a readability problem in the table on the sample page because of the light background image used in the table. To correct the readability problem, table text was changed to black to be seen on the white background of the table. To see how this was handled, examine Listing 6.13.
Figure 6.16: Using background images in your tables.
Listing 6.13. Table backgrounds.
<head> <title>Using Backgrounds in Tables</title> </head> <body bgcolor="#000000" TEXT="#FFFFFF"> <h2>A table with a background image:</h2> <center> <table border=5 cellpadding=5 cellspacing=10 width=75% background="wildlifa.gif" bgcolor="#FFFFFF"> <caption align=top> <FONT COLOR="BLACK"> <B>The Wildlife Preservation Society</B></FONT> </caption> <tr> <th><FONT COLOR="BLACK">Quarter</FONT></th> <th valign=top width=33%><FONT COLOR="BLACK">Wolf Status</FONT> <p> </p></th> <th valign=top width=33%><FONT COLOR="BLACK">Bear Status</FONT></th> <th valign=top width=34%><FONT COLOR="BLACK">Eagle Status</FONT></th> </tr> <tr> <th><FONT COLOR="BLACK">1st</FONT></th> <td width=33%><FONT COLOR="BLACK">1800</FONT></td> <td width=33%><FONT COLOR="BLACK">500</FONT></td> <td width=34%><FONT COLOR="BLACK">300</FONT></td> </tr> <tr> <th><FONT COLOR="BLACK">2nd</FONT></th> <td width=33%><FONT COLOR="BLACK">1200</FONT></td> <td width=33%><FONT COLOR="BLACK">450</FONT></td> <td width=34%><FONT COLOR="BLACK">275</FONT></td> </tr> <tr> <th><FONT COLOR="BLACK">3rd</FONT></th> <td><FONT COLOR="BLACK">900</FONT></td> <td><FONT COLOR="BLACK">425</FONT></td> <td><FONT COLOR="BLACK">250</FONT></td> </tr> <tr> <th><FONT COLOR="BLACK">4th</FONT></th> <td><FONT COLOR="BLACK">875</FONT></td> <td><FONT COLOR="BLACK">415</FONT></td> <td><FONT COLOR="BLACK">235</FONT></td> </tr> </table> </center> <p>If you use background images in your table, be sure to check the readability of the data. You may have to change the font color within the table as you see here.</p> </body> </html>
| Note |
The table in the previous example also uses the WIDTH attribute with header cells. This attribute is not part of the current table specification, but is supported by Netscape Navigator and Internet Explorer for both <TH> and <TD>. |
The table specification gives you advanced control over the placement of cells in your tables. Using the COLSPAN attribute, you can create cells that span two or more columns; with the ROWSPAN attribute, you can create cells that span two or more rows. By combining the COLSPAN and ROWSPAN attributes, you can create cells that span multiple columns and rows.
You can use the COLSPAN and ROWSPAN attributes with header and data cells. In a header, you can use COLSPAN to create major headings for sections of a table. If you use COLSPAN to span several column headers and define subheadings, you will need to use ROWSPAN in columns with only one level of heading to make sure headings and cells line up appropriately.
Figure 6.17 shows an example of using COLSPAN and ROWSPAN in a multicolumn table with subheadings. Listing 6.14 shows the markup for this example.
Figure 6.17: Creating columns and rows that span multiple cells.
Listing 6.14. Spanning columns and rows.
<HTML> <HEAD> <TITLE>Using Spanning columns and rows</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <DIV ALIGN=CENTER> <H2 ALIGN=LEFT>Creating columns and rows that fill more than one cell</H2> <P>&NBSP;</P> <TABLE BORDER=5> <CAPTION ALIGN=LEFT>Developing HTML Publications</CAPTION> <TR><TH ROWSPAN=2>Project Creation<TH COLSPAN=2>Project Design <TH ROWSPAN=2>Project Publication <TR><TH>Preliminary Design<TH>Phase II Design </TABLE> <P> </P> <H2 ALIGN=LEFT>Adding a cool effect with top and bottom framing:</H2> <P> </P> <TABLE BORDER=5 FRAME=VOID> <CAPTION ALIGN=LEFT>Developing HTML Publications</CAPTION> <TR><TH ROWSPAN=2>Project Creation<TH COLSPAN=2>Project Design <TH ROWSPAN=2>Project Publication <TR><TH>Preliminary Design<TH>Phase II Design </TABLE> </DIV> </BODY> </HTML>
The NOWRAP attribute for header and data cells is used to disable the automatic wrapping of text. Lines of text that don't wrap can alter your table's appearance by creating excessively wide cells. Therefore, you should use the NOWRAP attribute cautiously, if at all. If you do use NOWRAP, view your table with a small screen size, such as 640¥480 for Windows systems or 13-inch for Macintosh systems. Here's how you can add NOWRAP to a data cell:
<TR><TH>Precise Calculation<TH>Variance <TR><TD NOWRAP>12.872653872<TD NOWRAP>0.00000001
Tables can be a powerful addition to your documents. Study the key concepts of column and row headers, alignments for columns and rows, and column and row spanning. Use the examples in this chapter as guidelines for creating well-designed tables. The design concepts that went into making the tables are simple, but when combined, these concepts can be used to create more powerful tables. For example, cell padding and spacing can be used to increase the white space in the table and to make sure the data doesn't touch the cell walls.
