Tables

Contents:
The HTML Table Model
Table Tags
Beyond Ordinary Tables

You may wonder, given HTML's deep roots in academia, why the language standard doesn't include any explicit support for data tables. None at all[1] for a community steeped in mountains of data. And, that's just the academic community. Tables are an age-old respected means for cross-comparing items of information for all types of endeavors.

[1] The <pre> tag, although capable, is hardly ``support'' for tables.

Fortunately, the developers of the popular graphical browsers, including Netscape, Internet Explorer, and Mosaic, have stepped into the breach and come up with a fairly comprehensive set of HTML extensions for tables. In fact, they have eclipsed the Web standards organization devoted to HTML by including many of the table-handling features intended for inclusion in HTML version 3.2.

While it is relatively easy to swear off many of the other extensions to HTML, like frivolous background images or auto-scrolling text marquees, you simply will not be able to resist the siren call of the table extensions. They're just too useful to ignore.

The HTML Table Model

The model the extended browsers use for tables is fairly straightforward: tables are collections of numbers and words arranged and related in rows and columns of cells. Most cells contain the data values; others contain row and column headers that describe the data.

You define a table and include all of its elements between the <table> tag and its corresponding </table> end tag. Table elements, including data items, row and column headers, and captions, each have their own markup tag. Working from left to right and top to bottom, you define, in sequence, the header and data for each column cell across the table, and progress down row by row.

The latest browsers also support a collection of tag attributes that make your tables look good, including special alignment of the table values and headers, borders and table rule lines, and automatic sizing of the data cells to accommodate their content. Netscape and Internet Explorer each have a slightly richer set of attributes than Mosaic; we'll point out those variations as we go.

Table Contents

You may put nearly anything you might put within the body of an HTML document inside a table cell, including images, forms, rules, headings, and even another table. The browser treats each cell as a window unto itself, flowing the cell's content to fill the space, but with some special formatting provisions and extensions.

An Example Table

Here's a quick example that should satisfy your itching curiosity to see what an HTML table looks like in source code and when finally rendered as in Figure 9-1. More importantly, it shows you the basic structure of a table from which you can infer many of the elements, tag syntax and order, attributes, and so on, and to which you may refer back as you read the various detailed descriptions below: 

<table border cellspacing=0 cellpadding=5>
<caption align=bottom> Kumquat versus a poked eye, by gender</caption>
<tr>
<td colspan=2 rowspan=2></td>
<th colspan=2 align=center>Preference</th>
</tr>
<tr>
<th>Eating Kumquats</th>
<th>Poke In The Eye</th>
</tr>
<tr align=center>
<th rowspan=2>Gender</th>
<th>Male</th>
<td>73%</td>
<td>27%</td>
</tr>
<tr align=center>
<th>Female</th>
<td>16%</td>
<td>84%</td>
</tr>
</table>

Figure 9-1: HTML table example rendered by Netscape (top) and by Mosaic (bottom)

[Graphic: Figure 9-1]

Missing Features

HTML tables currently don't have all the features of a full-fledged table-generation tool you might find in a popular word processor. Rather than leave you in suspense, we'll list those things up front so you don't beat your head against the wall later trying to do something that just can't be done (at least, not yet):