HTML The Definitive Guide (118 page)

11.1 The HTML Table Model

11.3 New HTML 4.0 Table

Tags

Chapter 11

Tables

 

11.3 New HTML 4.0 Table Tags

While it is possible to build a simple table quickly, complex HTML tables with varying border styles, running headers and footers, and column-based layout were not easily constructed from the old HTML

3.2 table model. Microsoft had rectified this inadequacy somewhat by adding a number of table layout controls into Internet Explorer Version 3.0. These very useful extensions have now found their way into the new HTML 4.0 standard. They provide row-based grouping and running headers and footers, along with column-based layout features.

There is good news and bad news about these new table features, of course. They provide a nice way to make your tables more attractive and presentable, but they currently work only within Internet Explorer.

If you choose to use them, make sure your tables stand up with the older, non-HTML 4.0-compliant browsers, too.

11.3.1 Defining Table Sections

Within HTML 4.0 tables, all rows are created equal. In real tables, some rows are more equal than others.

And most tables have header and footer rows that repeat from page to page. In large tables, adjacent rows are grouped and delineated with different rules to make the table easier to read and understand. HTML 4.0

and Internet Explorer support all of these features with the , , and tags.

11.3.2 The Tag

Use the tag to define a set of table header rows. The tag may appear once within a

tag, at the beginning. Within the tag, you may place one or more tags, defining the rows within the table header. If given the opportunity, the HTML 4.0-compliant browser will replicate these heading rows when the table is printed or displayed in multiple sections. Thereafter, it will repeat these headings on each printed page if the table appears on more than one page.

Function:

Define a table header

Attributes:

ALIGN ONKEYPRESS

CHAR ONKEYUP

CHAROFF ONMOUSEDOWN

CLASS ONMOUSEMOVE

DIR ONMOUSEOUT

ID ONMOUSEOVER

LANG ONMOUSEUP

ONCLICK STYLE

ONDBLCLICK TITLE

ONKEYDOWN VALIGN

End tag:

; may be omitted

Contains:

table_content

Used in:

table_content

The ending tag is optional. Since the

tag only appears in tables where, presumably, other rows will be designated as the table body or footer, the tag is automatically closed when the browser encounters a or tag or when the table ends.

The many attributes of the

tag operate identically, take the same values, and affect all the enclosed contents as if you had specified them individually for each entry. For example, the align attribute accepts values of left, right, center, or justify, controlling the horizontal alignment of text in all the heading's rows. Similarly, the valign attribute accepts values of top, middle, baseline, or bottom, dictating the vertical alignment of text in all of the heading rows.

If you don't specify any alignments or styles, the browser centers the heading text vertically and horizontally within their respective cells, equivalent to specifying align=center and valign=middle for each. Of course, individual row and cell or style sheet specifications may override these attributes.

11.3.3 The

Tag

Use the

tag to define a footer for HTML 4.0 tables. The tag may appear only once, just before the end of a table. Like , it may contain one or more tags that let you define those rows that Internet Explorer or an HTML 4.0-compliant browser uses as the table footer. Thereafter, the browser repeats these rows if the table is broken across multiple physical or virtual pages. Most often, the browser repeats the table footer at the bottom of each portion of a table printed on multiple pages.

Function:

Define a table footer

Attributes:

ALIGN ONKEYPRESS

CHAR ONKEYUP

CHAROFF ONMOUSEDOWN

CLASS ONMOUSEMOVE

DIR ONMOUSEOUT

ID ONMOUSEOVER

LANG ONMOUSEUP

ONCLICK STYLE

ONDBLCLICK TITLE

ONKEYDOWN VALIGN

End tag:

; may be omitted

Contains:

table_content

Used in:

table_content

The closing tag is optional, since the footer ends when the table ends.

The HTML 4.0 standard specifies many different attributes for the

tag as for and the other table tags. Unfortunately, no browser yets supports them, including Internet Explorer. If you have special alignment attributes for your table footer, you'll need to specify them for each row within the tag.

11.3.4 The

Tag

Use the

tag to divide your HTML 4.0 table into discrete sections. The tag collects one or more rows into a group within a table. It is perfectly acceptable to have no tags within a table, although where you might include one, you probably will have two or more tags within a table. So identified, you can give each group different rule line sizes above and below the section. Within a tag, only table rows may be defined using the tag.

Function:

Define a section within a table

Attributes:

ALIGN ONKEYPRESS

CHAR ONKEYUP

CHAROFF ONMOUSEDOWN

CLASS ONMOUSEMOVE

DIR ONMOUSEOUT

ID ONMOUSEOVER

LANG ONMOUSEUP

ONCLICK STYLE

ONDBLCLICK TITLE

ONKEYDOWN VALIGN

End tag:

; may be omitted

Contains:

table_content

Used in:

table_content

The closing tag is optional, since the section ends at the next

or tag, or when the table ends. Like , there are many attributes for the tag, but none supported, even by Internet Explorer. If you have special alignment attributes for this section, you'll need to specify them for each row within the tag.

11.3.5 Using Table Sections

From a presentation standpoint, the most important thing you can do with the

, , and tags is divide your table into logical sections that are delimited by different borders. By default, Internet Explorer does not do anything special with the borders around the headers, footers, and sections within your table. By adding the rules attribute to the tag, however, you can draw thicker rule lines between your , one or more , and table sections, helping
readers better understand your table's organization. [The align attribute, 11.2.1.1]

For example, here is the simple table you saw earlier in this chapter augmented with a header and footer.

Notice that we've omitted many of the unnecessary closing tags for brevity and readability:

Kumquat versus a poked eye, by gender

		Preference
		Eating Kumquats	Poke In The Eye
Gender	Male	73%	27%
	Female	16%	84%
Note: eye pokes did not result in permanent injury

The resulting HTML table as rendered by Internet Explorer is shown in
Figure 11.5
. Notice how the rules after the table header and before the footer are thinner than the borders around the other table rows? This happened because we included the special rules=groups attribute to the

tag. Similar effects may be obtained by specifying rules=rows or rules=all (see later).

Figure 11.5: Use new HTML 4.0 table tags to specially section your tables
Long tables often benefit from thicker rules every few rows, making it easier to read the table. Do this by grouping the rules in your table with several

tags. Each set of rows contained in a single tag will have thicker rules before and after it.

Here is an expanded version of our table example, with additional sections set off as separate groups:

Kumquat versus a poked eye, by gender

		Preference
		Eating Kumquats	Poke In The Eye
Gender	Males under 18	94%	6%