by Jerry Honeycutt, Jim O'Donnell, and Mark R. Brown
As a tool for government, commercial, educational, and personal Web applications, HTML has many needs and expectations to meet. It's the language behind the most popular resource on the Internet and, as such, is required to support a greater range of uses today than perhaps its original creators had first imagined. For example, you might design a corporate Web site similar to a marketing brochure, while you'd design a government publication to present static data in tabular form. In most cases, you can use tables to better present these types of Web pages (my technical writing professor would be proud).
In print publications, tables are a basic design element. They're used to present data in rows and columns. They make comparative analysis more understandable. They're also used (albeit invisibly) to divide the printed page into sections for layout purposes. Tables should be a basic design element in your Web pages, too.
On the Web, tables have been used for a while now, thanks to Netscape and subsequently Microsoft, but they were not an official part of the HTML standard until HTML 3.2. This chapter shows you how to use HTML tables to organize content on your Web page or even to help lay out your Web page.
HTML defines tables in much the same way it defines list containers. The <TABLE> element is the container for the table's data and layout.
HTML tables are composed row by row: you indicate a new row with the <TR> (table row) tag, and you separate the data with either the <TH> (table header) or <TD> (table data) tags. Think of the <TR> tag as a line break, signaling that the following data starts a new table row. Table headers are generally shown in bold and centered by WWW browsers, and table data is shown in the standard body-text format. Whereas you can think of a row as a line in a table, a cell represents each box within the table.
The HTML for a basic table is shown in Listing 11.1. All of the HTML table elements used are supported by the latest versions of the most popular Web browsers: Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic. This table, as rendered by Internet Explorer, is shown in Figure 11.1.
<HTML> <HEAD> <TITLE>Basic Table Examples</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH>Colors</TH><TH>Of</TH><TH>The Rainbow</TH> <TR> <TD>Red</TD><TD>Orange</TD><TD>Yellow</TD> </TR> <TR> <TD>Green</TD><TD>Blue</TD><TD>Violet</TD> </TR> </TABLE> <HR> <TABLE BORDER> <CAPTION>My Favorite Groups</CAPTION> <TR><TH>Rock</TH><TD>Pink Floyd</TD> <TD>Led Zepplin</TD> <TD>The Dobbie Brothers</TD></TR> <TR><TH>Soft</TH><TD>Simon and Garfunkel</TD> <TD>Peter, Paul, & Mary</TD> <TD>Neil Young</TD></TR> <TR><TH>New Age</TH><TD>Enya</TD> <TD>Clannad</TD> <TD>Steamroller</TD></TR> </TABLE> </BODY> </HTML>
FIG. 11.1
Most of the HTML table tags are supported by the most popular Web browsers.
The basic HTML table tags shown in Figure 11.1 and Figure 11.2 are as follows:
In addition to the basic tags shown here, some other characteristics should be noted from the example shown in Figures 11.1 and 11.2:
NOTE: If you're concerned about browsers displaying your header text correctly (as emphasized text, preferably in a bold font), you can use style tags to force the issue. Be careful what you wish for, though; if you want an italicized font but the browser automatically formats the text bold, you can wind up with bold italicized headers.
NOTE: HTML 4.0 adds several new attributes to many table tags that are meant to improve access for international and disabled users.
For example, the AXIS="name" attribute for the <TH> tag lets you specify a spoken name for a table head, which can be used by a text-to-speech synthesizer. A similar attribute, AXES="row,column", has been added to the <TD>, or table data, tag to allow for speaking the row and column references for a table cell.
Almost every table-element defining tag also now includes the ID, CLASS, LANG, and DIR attributes. These define a named label, class definition, natural language, and text direction for table elements, respectively.
Cells do not necessarily have to contain data. To create a blank cell, either create an empty cell (for instance, <TD></TD>) or create a cell containing nothing visible (<TD> </TD>). Note that is an HTML entity, or special character, for a nonbreaking space. Though you would think these two methods would produce the same result, as you will see later in this chapter, in the section "Empty Cells and Table Appearance," different browsers treat them differently.
It's not really necessary to create blank cells if the rest of the cells on the row are going to be blank; the <TR> element signals the start of a new row, so the Web browsers automatically fill in blank cells to even out the row with the rest of the table.
TIP: Tables are necessarily uniform with equal numbers of cells in each row and in each column. No "L-shaped" tables (or worse!) allowed.
It is possible, through the use of the ALIGN and VALIGN attributes, to align table elements within their cells in many different ways. These attributes can be applied in various combinations to the <CAPTION>, <TR>, <TH>, and <TD> table elements. The possible attribute values for each of these elements are as follows:
These alignments are illustrated by the HTML document shown in Listing 11.2 and rendered by Netscape Navigator in Figure 11.2.
<HTML> <HEAD> <TITLE>Table Alignments</TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION ALIGN=BOTTOM>A Really Ugly Table</CAPTION> <TR> <TH></TH><TH>##########</TH><TH>##########</TH> <TH>##########</TH> </TR> <TR ALIGN=RIGHT> <TH>Row 1</TH><TD>XX<BR>XX</TD><TD ALIGN=CENTER>X </TD><TD>XXX</TD> </TR> <TR VALIGN=BASELINE> <TH ALIGN=LEFT>Second Row</TH><TD>XXX<BR>XXX</TD><TD>XXX</TD> <TD>XXX<BR>XXXXX<BR>XXX</TD> </TR> <TR ALIGN=LEFT> <TH>This Is<BR>The Bottom Row of <BR>The Table</TH> <TD VALIGN=BOTTOM>XXXXX</TD> <TD VALIGN=TOP>XXX<BR>XXXXX</TD> <TD VALIGN=MIDDLE>XXXXX</TD> </TR> </TABLE> </BODY> </HTML>
FIG. 11.2
Table element alignment can be specified row by row or for each individual element
in the table.
Although this table is pretty ugly, it illustrates the capabilities of the different ALIGN and VALIGN attributes, as follows:
NOTE: Sitting down with your favorite text editor and hacking out the HTML for a table isn't always the best way to do it. There comes a time when a piece of paper and a no. 2 pencil are the best design tools you can use.
Take a look at Figure 11.3. It shows a sketch for a table that has two rows and four columns. The first two columns of the first row are joined, and the last two columns of the last row are joined.
FIG. 11.3
Laying out your table before you start writing the HTML code is the easiest way to
design your tables.
NOTE: To make your HTML coding job easier, you can handwrite a <TABLE> tag above the table and a </TABLE> tag below the figure. Then, handwrite a <TR> at the beginning of each row, and a </TR> tag at the end of each row. Last, handwrite a <TD> and </TD> within each cell. If a cell is spanned, then write the number of cells it spans next to the <TD> tag and indicate if it spans rows or columns. Figure 11.4 shows you an example of such a sketch.
FIG. 11.4
After you mark up your sketch with tags, start at the top and work your way to
the bottom, left to right.
NOTE: With your marked-up sketch in hand, you're ready to write the HTML. Start at the top and work towards the bottom of the sketch in a left to right fashion. Type each tag as you encounter it. If you noted that a cell is spanned, be sure to add the ROWSPAN or COLSPAN attribute to the <TD> tag. The following listing shows you the HTML that results from the previous sketch. (Note that indenting the code can help clarify the row and column breaks.)
<TABLE>
<TR>
<TD COLSPAN=2> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD COLSPAN=2> </TD>
</TR>
</TABLE>
HTML 4.0 specifies a new value for the ALIGN attribute called CHAR, or character alignment. This implements a much-requested feature for tables: the ability to align content on a decimal point, colon, or other common character. It is used in conjunction with a new CHAR attribute. Here's a sample of its use:
<TR ALIGN=CHAR CHAR=".">...table data here...</TR>
The TR tag in this sample uses ALIGN=CHAR to specify that data in the cells in this row should be aligned by decimal point. CHAR="." sets the alignment character as a decimal point, although it could be any ASCII character.
The CHAR value for ALIGN can be used with the COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, and TD tags.
A new CHAROFF attribute can also be used to specify the character offset within a cell. For example, CHAROFF="30%" would tell the browser to place the character specified by the CHAR= attribute at an offset of 30% from the start of the cell.
Standard Units for Widths
Several HTML tag attributes allow you to specify the width for a frame, cell, or other page element. When you specify a width, you can use a percentage or specify an absolute width in one of several predefined units. In the preceding text, we used an example of CHAROFF="30%" to specify a character alignment offset, but we could have easily just said CHAROFF="20". This would have meant "20 screen pixels". A number in a width definition without a suffix is always assumed to be in pixels.
CHAROFF="20px" means the same thing but uses the actual suffix to specifically denote pixels, "px". You can also use "pt" to define a width in points, like this: CHAROFF="50pt". However, point widths are generally useful only in documents that are being formatted for print output on paper, since they have no absolute meaning on a monitor screen, which can be of any size.
Table 11.1 lists the acceptable suffixes for width definitions in HTML and shows their values.
| Suffix | Value |
| px, [none] | pixels |
| pt | points |
| pi | picas |
| in | inches |
| cm | centimeters |
| mm | millimeters |
| em | em units |
| % | percent of screen width |
There are more sophisticated things that you can do with tables, both by using additional table attributes and by different uses of some of the ones you already know about.
Within the TABLE element, HTML 4.0 now gives you a broad degree of control over where rules and frames are drawn within a table.
The FRAME attribute specifies which sides of a frame to render. It has the following possible values:
| VOID | No Frame |
| ABOVE | Top Side |
| BELOW | Bottom Side |
| HSIDES | Horizontal Sides |
| LHS | Left-Hand Side |
| RHS | Right-Hand Side |
| VSIDES | Vertical Sides |
| BOX or BORDER | All Four Sides |
In addition to the new FRAME attribute for TABLE, there is also a new RULES attribute. The RULES attribute is used to specify additional rulings in the table interior. For example, it can turn on rulings between all columns, or between groups of rows.
Here are the values for RULES, and their meanings:
| NONE | No rules |
| GROUPS | Horizontal rule between all row groups and a vertical rule between all column groups |
| ROWS | GROUPS rulings, plus horizontal rules between all rows |
| COLS | GROUPS rulings, plus vertical rules between all columns |
| ALL | Rules between all rows and all columns |
CAUTION: At the time of this writing, neither Microsoft Internet Explorer nor Netscape Communicator supported the HTML 4.0 additions of RULES and FRAME. Before adding these attributes to your tables, make sure that support for them has been added to the major browsers.
As mentioned previously, the BORDER attribute to the <TABLE> element was the HTML 3.2 element that created borders around table elements, and it has been retained in HTML 4.0 for backwards-compatibility. Even though this attribute is off by default, for most conventional tables--those used to organize information in a tabular format--borders are usually used to accentuate the organization of the information. Consider the HTML document shown in Listing 11.3 and rendered in Figure 11.5. In this case, the organization of the information is much easier to see in the version that includes borders.
<HTML> <HEAD> <TITLE>Table Borders</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR><TH>FRUITS</TH><TH>VEGETABLES</TH><TH>WHOLE GRAINS</TH></TR> <TR><TD>Apple</TD><TD>Broccoli</TD><TD>Barley</TD></TR> <TR><TD>Orange</TD><TD>Cauliflower</TD><TD>Weat Berries</TD></TR> <TR><TD>Kiwi</TD><TD>Sugar Snap Pea</TD><TD>Millet</TD></TR> <TR><TD>Pineapple</TD><TD>Bell pepper</TD><TD>Quinoa</TD></TR> </TABLE> <HR> <TABLE> <TR><TH>FRUITS</TH><TH>VEGETABLES</TH><TH>WHOLE GRAINS</TH></TR> <TR><TD>Apple</TD><TD>Broccoli</TD><TD>Barley</TD></TR> <TR><TD>Orange</TD><TD>Cauliflower</TD><TD>Weat Berries</TD></TR> <TR><TD>Kiwi</TD><TD>Sugar Snap Pea</TD><TD>Millet</TD></TR> <TR><TD>Pineapple</TD><TD>Bell Pepper</TD><TD>Quinoa</TD></TR> </TABLE> </BODY> </HTML>
FIG. 11.5
In many cases, borders accentuate the organization of the information.
However, HTML tables can be used in other ways, rather than for the simple tabular display of data. They give an HTML author great flexibility in presenting information, grouping it, and formatting it along with other information. Consider the HTML document shown in Listing 11.4 and rendered in Figure 11.6. In this case, the use of a borderless table allows the descriptive text of the image to be displayed alongside the image.
<HTML> <HEAD> <TITLE>Table Borders</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD><IMG SRC="lion.gif"></TD> <TD> The rampant lion is a symbol from Scottish heraldy. It symbolizes a duty and willingness to defend one's ideals and values, such as aretê. The color of the lion, White, is for the purity of the brotherhood of PEZ, void of the negativity associated with some fraternities. This White symbolizes how PEZ is a practice of the pure theory of brotherhood. This brotherhood has its roots in common ties and support rather than hazing and the like. </TD> </TR> </TABLE> </BODY> </HTML>
FIG. 11.6
Side-by-side presentation of information elements can be achieved by using HTML tables.
Rows and columns can be spanned--combined with adjacent cells to create larger cells for the data. For instance, in a table with five rows and five columns, the first row could be spanned across all five columns to create a banner header for the whole table. In the same table, each of the columns could have elements that spanned multiple rows. It would be possible, through spanning, to create rectangular table elements that span both multiple rows and columns, up to the full size of the table.
To span two adjacent cells on a row, use the ROWSPAN attribute with <TH> or <TD>, as follows:
<TD ROWSPAN=2>
To span two adjacent cells in a column, use the COLSPAN attribute with <TH> or <TD>, as follows:
<TD COLSPAN=2>
TIP: Don't forget to close your table data with the </TABLE> closing tag.
HTML 4.0 adds an additional attribute to TD, NOWRAP. If NOWRAP is present, cell contents disables automatic text wrapping for that cell. However, this attribute has been defined only for backwards-compatibility with current browsers and is functionally superseded by style sheets.
Listings 11.5 and 11.6 show an HTML document that makes use of row and column spanning. This example is shown in Figure 11.7, which shows some of the trouble you can get yourself into with row and column spanning. The table shown on the left is formatted correctly. However, HTML will allow you to overlap rows and columns if you aren't careful with your spanning, and the results of this can (and usually will) be unpredictable.
<HTML> <HEAD> <TITLE>Row and Column Spanning</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR><TH COLSPAN=3>DC nationals</TH><TR> <TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR> <TR> <TD>Husmann</TD><TD>O'Donnell</TD><TD ROWSPAN=5>Weinberg</TD> </TR> <TR> <TD COLSPAN=2>Popplewell</TD> </TR> <TR> <TD>McGilly</TD><TD>Longo</TD> </TR> <TR> <TD>Donahue</TD><TD>Seymour</TD> </TR> <TR> <TD>Camillo</TD><TD>Walsh</TD> </TR> </TABLE> </BODY> <HTML>
<HTML> <HEAD> <TITLE>Row and Column Spanning</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR><TH COLSPAN=3>DC nationals</TH><TR> <TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR> <TR> <TD>Husmann</TD><TD>O'Donnell</TD> <TD ROWSPAN=5> Weinberg<BR>Weinberg<BR>Weinberg<BR> Weinberg<BR>Weinberg<BR>Weinberg<BR> </TD> </TR> <TR> <TD COLSPAN=2>Popplewell</TD> </TR> <TR> <TD>McGilly</TD><TD>Longo</TD> </TR> <TR> <TD>Donahue</TD><TD>Seymour</TD> </TR> <TR> <TD>Camillo</TD><TD COLSPAN=2>Walsh Walsh Walsh</TD> </TR> </TABLE> </BODY> <HTML>
NOTE: When you create larger cells in an HTML table, you might find your cell data acts a bit unruly: not breaking properly, wrapping text when it shouldn't, and crowding too close to the cell divisions. Like other HTML documents, tables support internal HTML elements, such as <BR> (to create a line break in the data), hypertext link anchors, inline images, and even forms.
Use an HTML table in the same manner you would a spreadsheet: for data display, for creating data layouts (such as inventory lists or business invoices), and for calculation tables (when combined with a CGI script that can take your form input and generate output data that's displayed in your HTML table). The uses for tables are limited only by your data and your creativity.
FIG. 11.7
If you aren't careful, you can overlap rows and columns when using spanning, which
tends to give ugly results.
HTML 4.0 adds several tags for grouping rows and columns for the purpose of specifying common attributes for those groups.
COLGROUP assigns width and alignment attributes for a group of columns. For example, if you had a table with six columns and you wanted each of the first three columns to be 50 pixels wide and left-aligned, each of the second two columns to be 100 pixels wide and character-aligned on a decimal point, and the last column to take up the remainder of the screen width and right-aligned, you could accomplish all of this formatting with just the following three lines of HTML:
<COLGROUP WIDTH="50px" ALIGN=LEFT SPAN=3> <COLGROUP WIDTH="100px" ALIGN=CHAR CHAR="." SPAN=2> <COLGROUP WIDTH="100%" ALIGN=RIGHT>
Note that the SPAN attribute defines how many contiguous columns are in a COLGROUP group. If it's left out, the value defaults to SPAN=1, or a single column.
TBODY, THEAD, and TFOOT perform functions similar to COLGROUP, but they group rows instead of columns. THEAD and TFOOT define a group of rows to form a header or footer for a table, respectively. TBODY is used to group rows in the body of the table. Each is a container--that is, it is made up of corresponding begin and end tags, as in <TBODY></TBODY>--but the end tags for THEAD and TFOOT are optional, as long as a TBODY tag immediately follows. This was done for compatibility with older HTML tables.
Each row grouping container set must contain at least one TR, or table row, element.
A TFOOT block should actually precede the TBODY block, as browsers will logically insert the footer when needed in breaking pages.
Each row grouping element uses the same attributes and values as the COLGROUP tag.
NOTE: At the time of this writing, neither Microsoft Internet Explorer nor Netscape Communicator supported the HTML 4.0 additions of COLGROUP, THEAD, TFOOT, or TBODY. Before adding these attributes to your tables, make sure support for them has been added to the major browsers.
As mentioned earlier, there is sometimes a difference between an empty cell in a table and one with nothing visible in it. This is particularly true with Netscape Navigator and Internet Explorer, which will display the two differently. Consider the HTML document shown in Listing 11.7, which shows two tables. In the top table, there are several empty table cells--cells with only white space in them, which Netscape Navigator will not treat as data. In the lower table, these same cells have something in them: the HTML entity  , which is a nonbreaking space (an invisible character).
As shown in Figure 11.8, Internet Explorer will display these two tables differently. As you can see here, now it is mainly an aesthetic difference.
<HTML> <HEAD> <TITLE>Table Example: Empty Cells</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR><TD>Amaranth</TD><TD> </TD><TD>Buckwheat</TD></TR> <TR><TD>Barley </TD><TD>Rye </TD><TD></TD></TR> <TR><TD>Quinoa </TD><TD>Wheat</TD><TD></TD></TR> </TABLE> <HR> <TABLE BORDER> <TR><TD>Amaranth</TD><TD> </TD><TD>Buckwheat</TD></TR> <TR><TD>Barley </TD><TD>Rye </TD><TD>  </TD></TR> <TR><TD>Quinoa </TD><TD>Wheat</TD><TD>  </TD></TR> </TABLE> <BODY> <HTML>
HTML introduces several attributes that you can use to increase the degree of control you have over how tables are displayed. These attributes were once Netscape enhancements, supported by Internet Explorer, but are now a part of the HTML standard. Listing 11.8 shows the HTML document for these attributes, which are rendered by Internet Explorer in Figure 11.9.
FIG. 11.8
Netscape Navigator will display tables with empty cells differently from those that
contain invisible characters.
<HTML> <HEAD> <TITLE>Formatting Example></TITLE> </HEAD> <BODY> <TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10 WIDTH=100%> <TR> <TD>Width 100%</TD> <TD>Border<BR>CellPadding = 10<BR>CellSpacing</TD> </TR> <TR> <TD> <TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5 WIDTH=75%> <TR> <TD>Width 75%</TD> <TD>Border<BR>CellPadding = 5<BR>CellSpacing</TD> </TR> </TABLE> </TD> <TD>Have a nice day!</TD> </TR> </TABLE> <BODY> </HTML>
FIG. 11.9
HTML gives you complete control over the appearance of HTML tables.
The attributes shown in Figure 11.9 are as follows:
HTML makes no provision for setting a table or cell's color. However, both Netscape and Internet Explorer provide extensions that let you change the color of cells and borders. You use the BGCOLOR attribute to change the color of a cell's background, before any text or images are placed into the cell. You use the BORDERCOLOR attribute to change the color of the border around the cell. Both Netscape and Internet Explorer support these attributes.
The <TABLE>, <TD>, <TH>, and <TR> tags all support BGCOLOR and BORDERCOLOR attributes. Thus, you can apply colors to the entire table, an individual cell, or an individual row of the table. The example in Listing 11.9 shows you the HTML for three tables, which show you an example of each case. Figure 11.10 shows you how these tables are rendered in Internet Explorer.
<HTML> <HEAD> <TITLE>Foramtting Example</TITLE> <HEAD> <BODY> <TABLE BORDER BORDERCOLOR=BLACK BGCOLOR=WHITE> <TR><TD>1-one</TD><TD>2-two</TD><TD>3-three</TD></TR> <TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR> <TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR> </TABLE> Changing the entire table's color <HR> <TABLE BORDER> <TR BORDERCOLOR=BLACK BGCOLOR=WHITE><TD>1-one</TD> <TD>2-two</TD><TD>3-three</TD></TR> <TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR> <TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR> </TABLE> Changing a single row's color <HR> <TABLE BORDER> <TR><TD BORDERCOLOR=BLACK BGCOLOR=WHITE>1-one</TD><TD>2-two</TD> <TD>3-three</TD></TR> <TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR> <TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR> </TABLE> Changing a single cell's color </BODY> </HTML>
FIG. 11.10
Changing the color of a cell without changing the color of the surrounding border
looks very odd.
NOTE: HTML defines the following color names. For your convenience, you'll also find the equivalent hexadecimal RGB values next to each color.
BLACK #000000 SILVER #C0C0C0 GRAY #808080 WHITE #FFFFFF MAROON #800000 RED #FF0000 PURPLE #800080 FUCHSIA #FF00FF GREEN #008000 LIME #00FF00 OLIVE #808000 YELLOW #FFFF00 NAVY #000080 BLUE #0000FF TEAL #008080 AQUA #00FFFF
Table support has become widespread with most of the popular Web browsers, so there is less reason to avoid using tables. Still, there are folks out on the Web, either because of their Internet service provider or because of the type of connection to the Internet they have, who are forced to use Web browsers that do not have table support. If you are worried about missing such people, there are some alternatives that you can use, either instead of or in addition to using tables themselves.
Listing 11.10 shows an HTML document for a fairly simple table shown in Figure 11.11.
<HTML> <HEAD> <TITLE>Row and Column Spanning</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR><TH COLSPAN=3>DC nationals</TH><TR> <TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR> <TR> <TD>Husmann</TD><TD>O'Donnell</TD> <TD VALIGN=TOP ROWSPAN=5>Weinberg</TD> </TR> <TR> <TD COLSPAN=2>Popplewell</TD> </TR> <TR> <TD>McGilly</TD><TD>Longo</TD> </TR> <TR> <TD>Donahue</TD><TD>Seymour</TD> </TR> <TR> <TD>Camillo</TD><TD>Walsh</TD> </TR> </TABLE> </BODY> <HTML>
FIG. 11.11
A sample table showing a fairly straightforward organization of information.
Some other ways of displaying this information, not using tables, are as follows:
<HTML> <HEAD> <TITLE>Row and Column Spanning</TITLE> </HEAD> <BODY> <STRONG>DC Nationals</STRONG> <UL> <LI><EM>Offense</EM> <UL> <LI>Husmann <LI>Popplewell <LI>McGilly <LI>Donahue <LI>Camillo </UL> <LI><EM>Defense</EM> <UL> <LI>O'Donnell <LI>Popplewell <LI>Longo <LI>Seymour <LI>Walsh </UL> <LI><EM>Goalie</EM> <UL> <LI>Weinberg </UL> <UL> <BODY> </HTML>
FIG. 11.12
Because support for lists is more widespread than for tables, using lists can sometimes
be a good alternative.
<HTML> <HEAD> <TITLE>row and Column Spanning</TITLE> </HEAD> <BODY> <PRE> +------------------+----------------------+--------------------+ | Offense | Defense| Goalie | +------------------+----------------------+--------------------+ | Husmann | O'Donnell || | Popplewell || | McGilly | Longo | Weinberg| | Donahue | Seymour|| | Camillo | Walsh || +------------------+----------------------+--------------------+ </PRE> </BODY> </HTML>
The use of tables to display tabular information is, by definition, pretty obvious. Tables can also come in handy when using HTML forms, as they give you the capability to create a very well-organized form for entering information. Tables can be used in other ways as well, as mentioned briefly earlier. Because they give you the ability to group text and graphics in many different ways, they can be used to enhance the way a page is displayed.
Consider the HTML document shown in Listing 11.13. This document includes graphics and text information, and is meant to display it as a sort-of business card. This document is shown, as rendered by Internet Explorer, in Figure 11.14.
FIG. 11.13
A preformatted table isn't very pretty, but it will be displayed correctly in just
about any Web browser.
<HTML> <HEAD> <TITLE>Using Tables to Display Information</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD> <TH VALIGN=TOP>Jerry Honeycutt</TH> </TR> <TR> <TD VALIGN=TOP><EM><Books:</EM><BR> Using the Internet with Windows 95<BR> Windows 95 Registry and Customization Handbook<BR> Special Edition Using the Windows 95 Registry<BR> VBScript by Example<BR> Using the Internet 2E<BR> Special Edition Using the Internet 3E<BR> </TD> </TR> <TR><HR></TR> <TR> <TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM> jerry@honeycutt.com</EM></TD> </TR> </TABLE> <BODY> </HTML>
FIG. 11.14
Though at first glance this does not look like a "table," the use of an
HTML table to organize the information has made the display more effective.
To refine this Web page further, some of the information presented within it can be displayed differently--in this case, by using an HTML list (an unordered list, but any other kind of list could be used just as easily). The HTML code for this is shown in Listing 11.14; it makes sense to group lists of data by using HTML list elements, and the ability to include these within a table allows the information to be conveyed more clearly. The revised Web page is shown in Figure 11.15.
<HTML> <HEAD> <TITLE>Using Tables to Display Information</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD> <TH VALIGN=TOP>Jerry Honeycutt</TH> </TR> <TR> <TD VALIGN=TOP><EM><Books:</EM><BR> <UL> <LI>Using the Internet with Windows 95 <LI>Windows 95 Registry and Customization Handbook <LI>Special Edition Using the Windows 95 Registry <LI>VBScript by Example <LI>Using the Internet 2E <LI>Special Edition Using the Internet 3E </UL> </TD> </TR> <TR><HR></TR> <TR> <TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM> jerry@honeycutt.com</EM></TD> </TR> </TABLE> <BODY> </HTML>
FIG. 11.15
Combining lists and tables gives you powerful means for organizing and displaying
information within your Web pages.
Another way to display this information is to use tables within a larger table. The list items are composed of both a team name and a year (or range of years). Couldn't this information also be displayed in a table? In HTML, you can nest tables within other tables.
Listing 11.15 shows the HTML code for the business-card Web page using nested tables. It is displayed in Figure 11.16. Notice the nested tables are displayed with borders (and with cell spacing and padding reduced to make them more compact), while the outer table used to structure the whole page is not.
<HTML> <HEAD> <TITLE>Using Tables to Display Information</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD> <TH VALIGN=TOP>Jerry Honeycutt</TH> </TR> <TR> <TD VALIGN=TOP><EM><Books:</EM><BR> <TABLE BORDER CELLSPACING=1 CELLPADDING=1> <TR><TH>Book</TH><TH>Year</TH><TR> <TR><TD>Using the Internet with Windows 95</TD> <TD>1995</TD></TR> <TR><TD>Windows 95 Registry and Customization Handbook </TD><TD>1996</TD></TR> <TR><TD>Special Edition Using the Windows 95 Registry </TD><TD>1996</TD></TR> <TR><TD>VBScript by Example</TD><TD>1996</TD></TR> <TR><TD>Using the Internet 2E</TD><TD>1996</TD></TR> <TR><TD>Special Edition Using the Internet 3E</TD> <TD>1996</TD></TR> </TABLE> </TD> </TR> <TR><HR></TR> <TR> <TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM>jerry@honeycutt.com </EM></TD> </TR> </TABLE> <BODY> </HTML>
You can easily spruce up a table by using an image as the table's header. That is, instead of displaying a plain-text heading for the table, create a snazzy image and use that instead. Listing 11.16 shows you the HTML for such a table, and Figure 11.17 shows you this table rendered in Internet Explorer. There are a couple of things you should note about this example:
FIG. 11.16
Nested tables are another way to organize information effectively within a Web page.
<HTML> <HEAD> <TITLE>Pictures in Headings</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <TABLE WIDTH=500 CELLSPACING=0 CELLPADDING=2 BORDER=0> <TR> <TH COLSPAN=2> <IMG SRC="head.gif" BORDER=0 HEIGHT=25 WIDTH=500> </TH> </TR> <TR> <TD VALIGN=TOP> <IMG SRC="internet.gif"> </TD> <TD VALIGN=TOP> This book will show you how to get the most out of the Internet. You won't find intimidating, technical language here. You'll find no-nonsense instructions for using e-mail, Usenet, FTP, and the World Wide Web. You'll also learn how to find your way around the World Wide Web, read the Usenet newsgroups, and more. </TD> </TR> </TABLE> </BODY> </HTML>
FIG. 11.17
When using an image for a table heading, use your favorite paint program to fade
the image before adding headings.
Figure 11.18 shows you an example of a home page that uses tables extensively for layout purposes. This happens to be Microsoft's home page. Note that the toolbar at the top of the page is actually defined as a table. As well, each layout region on this page is actually a cell within the table.
FIG. 11.18
Use tables to split an HTML document into individual regions in which you put your
elements.
© Copyright, Macmillan Computer Publishing. All rights reserved.