HTML The Definitive Guide (119 page)

Males over 18

73%

27%

Females under 18

34%

66%

Females over 18

16%

84%

Note: eye pokes did not result in permanent injury

The result is shown in
Figure 11.6
.

Figure 11.6: Multiple segments further divide a table
In this case, we wind up with four rows in the table, separated into two groups by a thicker rule between them. Any number of groups could be created within the table by adding more tags.

11.3.6 Defining Column Groups

The basic HTML table model is row-centric. Sometimes, though, it is easier to deal with your table as a collection of columns. Using the and tags, HTML 4.0, as originally implemented by Internet Explorer through table extensions, helps you turn the tables and think in columns.

Unlike the sectioning tags we describe in the previous sections, which are interspersed with the rows of a table to define headers, footers, and sections within the table, the column-related tags cannot be intermingled with the content of a table. Instead, you must place them at the very beginning of a table, before the content. They define the model by which HTML 4.0-compliant browsers render the columns.

11.3.7 The Tag

The tag defines a column group. You can use the tag in two ways: as a single definition of several identical columns or as a container for several dissimilar columns. The tag may appear only within a

tag, but you may define one or more column groups within a table. The ending tag is rarely used; instead, the ends at the next , , , , or tag.

Currently, only Internet Explorer supports

.

11.3.7.1 The span attribute

Use the span attribute with the

tag to achieve the first type of column grouping. The value of the span attribute is the integer number of columns affected by the tag. For example, a table with six columns - four in the first group and two in the other - would appear in the source code as:

When an HTML 4.0-compliant browser collects the table cells into columns by the example definition, it groups the first four cells in each row as the first column group and the next two cells into a second column group. Any other attributes of the individual

tags then are applied to the columns contained within that group.

11.3.7.2 When to span and col

To use the

tag as a container for dissimilar columns, leave out the span attribute, but include within each tag an individual tag for each column within the group. For instance:

This method creates the same number of columns in each group as we had with the span attribute, but lets you specify column attributes individually. You can still supply attributes for all the columns via the

tag, but they will be overridden by the attributes in the tags, as appropriate.

Function:

Define a column group within a table

Attributes:

ALIGN ONKEYUP

CHAR ONMOUSEDOWN

CHAROFF ONMOUSEMOVE

CLASS ONMOUSEOUT

DIR ONMOUSEOVER

ID ONMOUSEUP

LANG SPAN

ONCLICK STYLE

ONDBLCLICK TITLE

ONKEYDOWN VALIGN

ONKEYPRESS WIDTH

End tag:

; usually omitted

Contains:

column_content

Used in:

table_content

For instance, suppose we want our first example group of four columns to each occupy 20 percent of the table, with the remaining two columns taking up 10 percent each of the total table width. That's easy with the span attribute:

The structure also can be done with individually specified columns:

There is no reason not to use both methods in the same table. For instance, we could specify our example column groupings, complete with width attributes:

Notice that this lets us align the contents of the two columns of the second group individually (the default alignment is centered).

11.3.7.3 The other

attributes
The many attributes common to tables control the familiar aspects of each column in the -encapsulated column group. These attributes accept the same values and behave exactly like the equivalent attributes for the tag

Use the

tag to control the appearance of one or more columns within a column group.

Function:

Define a column within a column group

Attributes:

ALIGN ONKEYUP

CHAR ONMOUSEDOWN

CHAROFF ONMOUSEMOVE

CLASS ONMOUSEOUT

DIR ONMOUSEOVER

ID ONMOUSEUP

LANG SPAN

ONCLICK STYLE

ONDBLCLICK TITLE

ONKEYDOWN VALIGN

ONKEYPRESS WIDTH

End tag:

None

Contains:

Nothing

Used in:

column_content

The

tag may appear only within a tag within a table. It has no content, and thus has no ending tag. Rather, it represents one or more columns within a to which an HTML

4.0-compliant browser applies the

tag's attributes.

Currently, only Internet Explorer support the

tag.

11.3.8.1 The span attribute

The span attribute for the

tag, like for the tag, lets you specify how many successive columns are affected by this tag. By default, only one is affected. For example, let's create a that has five columns. We align the first and last columns to the left and right, respectively, while the middle three are centered:

The

tag should only be used within tags that do not themselves use the span attribute. Otherwise, Internet Explorer or a future HTML 4.0-compliant browser ignores the individual tags and their attributes.

11.3.8.2 The other

attributes
The many attributes common to tables control the familiar aspects of the column defined by the tag. These attributes accept the same values and behave exactly like the equivalent attributes for the tags; the additional borders were drawn by the rules=groups attribute in the

tag. 11.3.8 The
tag. 11.3.9 Using Column Groups Column groups are easier to use than they first appear. Think of them as a template of how to format your table columns. Their main purpose is to create groups that can be separated by thicker rules within your table, and to streamline the process of applying formatting attributes to all the cells in one or more columns. Returning to our original table example, we can place a thicker rule between the column labels and the data cells by placing the column labels in one column group and the data cells in another: Kumquat versus a poked eye, by gender Preference Eating Kumquats Poke In The Eye Gender Males under 18 94% 6% Males over 18 73% 27% Females under 18 34% 66% Females over 18 16% 84% Note: eye pokes did not result in permanent injury The results are shown in Figure 11.7 . All we added were the two

tag. For borders between column groups to be drawn, the rules attribute must be set to groups, cols, or all.

Figure 11.7: Example demonstrating the various Internet Explorer table extensions

11.2 Table Tags

11.4 Beyond Ordinary Tables