[Chapter 11] Tables

Of all the extensions that found their way into the HTML 3.2 standard, none is more welcome than tables. While HTML tables are useful for the general display of tabular data, they also serve an important role in managing document layout. Creative use of tables, as we'll show in this chapter, can go a long way to enliven an otherwise dull document layout. And you may apply all the HTML styles to the various elements of a table to achieve a desktop-published look and feel.

11.1 The HTML Table Model

The standard HTML model for tables is fairly straightforward: a table is a collection 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 top to bottom and left to right, 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 an extended 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. The various popular browsers have slightly different sets of table attributes; we'll point out those variations as we go.

Table Contents

You may put nearly anything you might have 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 11.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 as you read the following various detailed descriptions:

<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 11.1: HTML table example rendered by Netscape (top) and by Mosaic (bottom)

[Graphic: Figure 11-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):

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, unless you use one of the monospace font styles.
Netscape and Internet Explorer give you the ability to set the thickness of table and cell borders. Netscape allows only one line size for the table's borders and rules; Internet Explorer has limited provisions for varying rule widths between the header, body, and footer of a table.
Except in Internet Explorer, 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.

11. Tables

11.1 The HTML Table Model

Table Contents

An Example Table

Figure 11.1: HTML table example rendered by Netscape (top) and by Mosaic (bottom)

Missing Features