[Chapter 9] 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.

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.

9.1 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):

Most browsers, save for Internet Explorer and the latest version of Netscape Navigator (2.0), don't flow text around a table as they do for images. Rather, they isolate a table from the text content with line breaks. The table does inherit the alignment of the current text flow--normally left-justified as with regular text, or center-justified, if contained within the <center> tag. [<center>, 4.7.6]
The general problem of text alignment in HTML carries over into tables. You may align values inside their individual cells, but you cannot align them between cells. For instance, you cannot vertically align the decimal points in a column of numbers, even though they all might have the same number of digits.
Mosaic's table border and rule lines are all or nothing; either you include them or you don't. Netscape and Internet Explorer, on the other hand, give you the ability to set their thickness, but you get to use only one size line for the table's borders and rules, if you choose to include them at all. You can't have a thicker border separate the table headings from the table body, for example, or have a heavier border between rows at regular intervals. Nor can you have a different-sized outside border.
HTML tables don't have running headers or footers. Of course, such things don't matter with an HTML browser where everything is on a single, infinitely long page. Running headers and footers are nice to have, though, when you print out a long table onto separate sheets of paper.


Using named parameters with GET applications	Book Index	Table Tags