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

Other Attributes of the <TABLE> Tag

Because of the new support for dividing tables into logical sections and the grouping of columns, the W3C has introduced some new attributes for the <TABLE> tag that enable you to control inner and outer borders of a table. Inner borders are controlled by the RULES attribute. You can think of inner borders as the dividing lines between certain components of the table. RULES can take on the values shown in Table 6.1.

FIGURE 6.12  You can also group columns and still assign alignment parameters on an individual basis.

The FRAME attribute controls which sides of the outer borders are displayed. In the context of tables, FRAME refers to the outer perimeter of the entire table and not frames such as those discussed in Chapter 7, “Frames.” FRAME can take on the values summarized in Table 6.2.

Tables as a Design Tool

Although tables were developed for presenting columnar data, they have evolved to the point where they can do much more. Three primary driving forces are behind the rise of tables as a design tool:

•  You aren’t restricted to only putting text in table cells.

•  You can make a cell occupy more than one row or column.

•  You get incredibly fine control over the alignment of content in individual cells.

Creating a Complex Layout

The ABCNEWS.com page is a complex combination of embedded tables (see Figure 6.13). The navigation images you see down the right side are contained in the rightmost cell of the overall table that creates the structure for the page.

Aligning Images of Different Sizes

Figure 6.14 shows MCI’s and Continental Airlines’ joint promotion for frequent flyer miles. Note that image of the MCI Calling Card and the image containing the text next to it are of different heights. Because each image is of a slightly different size, it was necessary to place each in its own table cell and then use the VALIGN attribute to make them line up along their baselines.

Aligning Form Fields

The checkout page on Cdnow.com’s Web site would be a mess if it weren’t for the different form fields placed in table cells (see Figure 6.15). The prompting text in front of the fields (Address Line 1, Address Line 2, City, State, and so on) are of varying lengths. If the fields started right after each word, none of them would line up. By placing both the prompting text and the form fields in common table rows, the alignment is perfect.

FIGURE 6.13  Sites such as ABCNEWS.com typically use tables to create a columnar look for the layout.

FIGURE 6.14  Different image sizes can make a page look unaligned. By placing images in a table and using alignment attributes, everything lines up cleanly.

FIGURE 6.15  Using a table to align form fields is an essential part of making a form readable and usable.

Creating Tables with Web Page Authoring Tools

The table tags have vexed some content developers from the beginning because it is hard for some folks to keep track of all their <TR>, <TH>, and <TD> tags. It didn’t take long for many popular document authoring tools to provide support for the creation and modification of HTML tables—particularly WYSIWYG support that spares a developer from seeing any table tags at all. This chapter closes with a look at how four authoring tools can help you create tables.

Microsoft FrontPage 98

The FrontPage Editor gives you extensive table support from the moment you start a table. In particular, you can create a new table in three ways:

•  Choose Table, Draw Table to activate the Table Drawing tool. This enables you to draw the boundaries of your table and then draw the lines to form the rows and columns (see Figure 6.16).

•  Choose Table, Insert Table to launch a dialog box that prompts you for basic table information, such as the number of rows and columns, width, border size, alignment, cell padding, and cell spacing. After these parameters are collected, FrontPage creates the shell of the table for you.

•  Click the Insert Table button on the toolbar. This reveals a 4-row-by-5-column grid that you can drag your mouse pointer over to specify the dimensions of your table. After you have the proper size selected, simply release your mouse button and FrontPage will place the empty table on the page.

FIGURE 6.16  FrontPage’s Drawing tool enables you to sketch out your table directly on the screen.