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 are not easily constructed from the HTML 3.2 table model. Microsoft has rectified this inadequacy somewhat by adding a number of table layout controls to their Internet Explorer browser (Version 3.0 and later). These controls provide row-based grouping and running headers and footers, along with column-based layout controls.
There is good news and bad news about these table extensions, of course. They provide a nice way to make your tables more attractive and presentable, but they only work within Internet Explorer, which, at the time this book is written, is not the most popular browser. If you choose to use these extensions, make sure your tables stand up with the other browsers, too, without the additional layout and grouping features available with Internet Explorer. Otherwise, you will lose a significant chunk of your audience.
Within HTML 3.2 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. Internet Explorer supports all of these features with the <thead>, <tfoot>, and <tbody> tags.
Use the <thead> tag to define a set of table header rows.
The <thead> tag may appear once within a <table> tag, at the beginning. Within the <thead> tag, you may place one or more <tr> tags, defining the rows within the table header. If given the opportunity, Internet Explorer will replicate these heading rows when the table is printed or displayed in multiple sections. Thereafter, Internet Explorer will repeat these headings on each printed page if the table appears on more than one page.
The ending </thead> tag is optional and may be omitted. Since the <thead> tag only appears in tables where, presumably, other rows will be designated as the table body or footer, the <thead> tag is automatically closed when the browser encounters a <tbody> or <tfoot> tag or when the table ends.
The attributes of the <thead> tag--align, class, style, and valign--operate identically, take the same values, and affect all the enclosed <tr> contents as if you had specified them individually for each <tr> entry. The align attribute accepts values of left, right, center, or justify, controlling the horizontal alignment of text in the heading rows. Similarly, the valign attribute accepts values of top, middle, or bottom and behaves just like the valign attribute in the <tr> tag, dictating the vertical alignment of text in the heading rows. The by-now-familiar attributes for setting the content style properties are style and class.
If you don't specify any alignments or style attribute, Internet Explorer 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.
Use the <tfoot> tag to define a footer for Internet Explorer tables.
The <tfoot> tag may appear only once just before the end of a table. Like <thead>, it may contain one or more <tr> tags that let you define those rows that Internet Explorer uses as the table footer. Thereafter, the browser repeats these rows if the table is broken across multiple physical or virtual pages. Most often, Internet Explorer repeats the table footer at the bottom of each portion of a table printed on multiple pages.
The closing </tfoot> tag is optional, since the footer ends when the table ends. There are no attributes for the <tfoot> tag. If you have special alignment attributes for your table footer, you'll need to specify them for each row within the <tfoot> tag.
Use the <tbody> tag to divide your Internet Explorer table into discrete sections.
The <tbody> tag collects one or more rows into a group within a table. It is perfectly acceptable to have no <tbody> tags within a table, although where you might include one, you probably will have two or more <tbody> tags within a table. So identified, you can give each <tbody> group different rule line sizes above and below the section. Within a <tbody> tag, only table rows may be defined using the <tr> tag.
The closing </tbody> tag is optional, since the section ends at the next <tbody> or <tfoot> tag, or when the table ends. There are no attributes for the <tbody> tag. If you have special alignment attributes for this section, you'll need to specify them for each row within the <tbody> tag.
From a presentation standpoint, the most important thing you can do with the <thead>, <tfoot>, and <tbody> 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 <table> tag, however, you can draw thicker rule lines between your <thead>, one or more <tbody>, and <tfoot> table sections, helping readers better understand your table's organization. [the section called "The border, frame, and rules attributes"]
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:
<table border cellspacing=0 cellpadding=5 rules=groups> <caption align=bottom>Kumquat versus a poked eye, by gender</caption> <thead> <tr> <td colspan=2 rowspan=2> <th colspan=2 align=center>Preference </tr> <tr> <th>Eating Kumquats <th>Poke In The Eye </tr> </thead> <tbody> <tr align=center> <th rowspan=2>Gender <th>Male <td>73% <td>27% </tr> <tr align=center> <th>Female <td>16% <td>84% </tr> </tbody> <tfoot> <tr> <td colspan=4 align=center> Note: eye pokes did not result in permanent injury </table>
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 <table> tag. Similar effects may be obtained by specifying rules=rows or rules=all (see below).
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 <tbody> tags. Each set of rows contained in a single <tbody> 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.
<table border cellspacing=0 cellpadding=5 rules=groups> <caption align=bottom>Kumquat versus a poked eye, by gender</caption> <thead> <tr> <td colspan=2 rowspan=2> <th colspan=2 align=center>Preference <tr> <th>Eating Kumquats <th>Poke In The Eye <tbody> <tr align=center> <th rowspan=4>Gender <th>Males under 18 <td>94% <td>6% <tr align=center> <th>Males over 18 <td>73% <td>27% <tbody> <tr align=center> <th>Females under 18 <td>34% <td>66% <tr align=center> <th>Females over 18 <td>16% <td>84% <tfoot> <tr> <td colspan=4 align=center> Note: eye pokes did not result in permanent injury </table>
The result is shown in Figure 11.6.
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 <tbody> tags.
The HTML table model is row-centric, defining tables as a collection of cells organized into rows. Sometimes, though, it is easier to deal with your table as a collection of columns. Using the <colgroup> and <col> tags, Internet Explorer helps you turn the tables and think in columns.
Unlike the sectioning tags we describe above, 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 Internet Explorer renders the columns.
The <colgroup> tag defines a column group.
You can use the <colgroup> tag in two ways: as a single definition of several identical columns or as a container for several dissimilar columns. The <colgroup> tag may only appear within a <table> tag, but you may define one or more column groups within a table. The ending </colgroup> tag is rarely used; instead, the <colgroup> ends at the next <colgroup>, <thead>, <tbody>, <tfoot>, or <tr> tag.
Use the span attribute with the <colgroup> tag to achieve the first type of column grouping. The value of the span attribute is the integer number of columns affected by the <colgroup> 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:
<colgroup span=4> <colgroup span=2>
When Internet Explorer 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 <colgroup> tags then are applied to the columns contained within that group.
To use the <colgroup> tag as a container for dissimilar columns, leave out the span attribute, but include within each <colgroup> tag an individual <col> tag for each column within the group. For instance:
<colgroup> <col> <col> <col> <col> <colgroup> <col> <col>
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 <colgroup> tag, but they will be overridden by the attributes in the <col> tags, as appropriate.
The align, valign, width, class, and style attributes control the familiar aspects of each columns in the <colgroup>-encapsulated column group. These attributes accept the same values and behave exactly like the equivalent attributes for the <td> tag. [the section called "The <th> and <td> Tags"]
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:
<colgroup span=4 width="20%"> <colgroup span=2 width="10%">
The structure also can be done with individually specified columns:
<colgroup width="20%"> <col> <col> <col> <col> <colgroup width="10%"> <col> <col>
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:
<colgroup span=4 width="20%" align=right> <colgroup width="10%"> <col align=left> <col align=right>
Notice that this lets us align the contents of the two columns of the second group individually (the default alignment is centered).
Use the <col> tag to control the appearance of one or more columns within a column group.
The <col> tag may appear only within a <colgroup> tag within a table. It has no content, and thus has no ending tag. Rather, it represents one or more columns within a <colgroup> to which Internet Explorer (not Netscape) applies the <col> tag's attributes.
The align attribute affects the placement of content within the columns. This attribute accepts the same values and behaves exactly like the equivalent attribute for the <td> tag. [the section called "The <th> and <td> Tags"]
The span attribute for the <col> tag, like the <colgroup> tag, lets you specify how many successive columns are affected by this <col> tag. By default, only one is affected. For example, let's create a <colgroup> that has five columns. We align the first and last columns to the left and right, respectively, while the middle three are centered:
<colgroup> <col align=left> <col align=center span=3> <col align=right>
The <col> tag should only be used within <colgroup> tags that do not themselves use the span attribute. Otherwise, Internet Explorer ignores the individual <col> tags and their attributes.
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:
<table border cellspacing=0 cellpadding=5 rules=groups> <caption align=bottom>Kumquat versus a poked eye, by gender</caption> <colgroup span=2> <colgroup span=2> <thead> <tr> <td colspan=2 rowspan=2> <th colspan=2 align=center>Preference <tr> <th>Eating Kumquats <th>Poke In The Eye <tbody> <tr align=center> <th rowspan=4>Gender <th>Males under 18 <td>94% <td>6% <tr align=center> <th>Males over 18 <td>73% <td>27% <tbody> <tr align=center> <th>Females under 18 <td>34%</td> <td>66%</td> <tr align=center> <th>Females over 18 <td>16% <td>84% <tfoot> <tr> <td colspan=4 align=center> Note: eye pokes did not result in permanent injury </table>
The results are shown in Figure 11.7. All we added were the two <colgroup> tags; the additional borders were drawn by the rules=groups attribute in the <table> tag. For borders between column groups to be drawn, the rules attribute must be set to either groups, cols, or all.