Chapter 5. Tables

HTML tables offer a detailed way to present data, as well as a creative way to lay out the information in your web documents. The standard HTML model for tables is straightforward: a table is a collection of data arranged and related in rows and columns of cells. Most cells contain data values; others contain row and column headers that describe the data.

The HTML 4.01 table specification defines a number of tags and attributes for creating tables. Newly supported tags allow you to organize and display table data with great detail, and with the application of CSS-style elements, table styles can be standardized across your documents.

The main tags that describe tables are: <table>, <caption>, <tr>, <th>, and <td>. The <table> tag surrounds the table and gives default specifications for the entire table such as background color, border size, and spacing between cells. The optional <caption> tag is placed within the <table> tags and provides a caption for the table. <tr> tags denote each row of the table and contain the tags for each cell within a row. <th> and <td> describe the table cells themselves, <th> being a header cell and <td> being a regular cell. <th> and <td> tags surround the information that is displayed within each table cell.

Table cells are defined across each row of a table. The number of cells in a row is determined by the number of <th> or <td> tags contained within a <tr>. If a table cell spans more than one row (using the rowspan attribute), the affected rows below it automatically accommodate the cell, and no additional cell tag is needed to represent it in those rows.

Figure 5-1 shows an HTML table rendered in two different browsers. Note how differently each browser displays the same table. You should keep these differences in mind when designing tables and test to see how your table looks in different browsers (as with all of your HTML documents).

Figure 5-1. HTML table rendered by Navigator (top) and by Explorer (bottom)

Here is the code that renders the table:

<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>

The contents of table cells may be any data that can be displayed in an HTML document. This can be plain text, images, tagged text, and other HTML structures. The table cells are sized according to their contents and in relation to other cells.