home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

13.3. Basic Table Structure

At their most basic, tables are made up cells, arranged into rows. You can control display characteristics for the whole table, for individual rows, and for individual cells.

13.3.1. Rows and Cells

The bare minimum tags for describing a table are <table>, <tr>, and <td>. The following HTML shows the basic structure for a four-cell table:

     <TD>cell 1</TD><TD>cell 2</TD>
     <TD>cell 3</TD><TD>cell 4</TD>

The <table> tag defines the beginning and end of the table. Its contents include a number of rows (two in our simple example). Each row is defined by <tr> tags and is made up of a number of data (or header) cells. Data cells are indicated by the <td> tag. A table cell may contain any data that can be displayed in an HTML document (formatted text, images, multimedia elements, and even other tables).

Figure 13-1 gives a visual representation of this concept. The image on the left shows that the table consists of two rows, each containing two cells. The image on the right shows how the HTML corresponds to the rows and cells.

Figure 13-1

Figure 13-1. HTML table structure

Header cells use the <th> tag and function the same as data cells, but they are generally displayed in bold centered text (although some browsers vary). You may also add a caption to the table (using the <caption> tag), which provides a title or brief description of the table. The <caption> tag should be placed before the first row of the table; be sure that it is outside the row containers. Because tables are so often used as layout devices only, the caption feature is less often used than the other main table components.

The table system in HTML is very row-centric. Rows are labeled explicitly, but the number of columns is just implied by the number of cells in the longest row. In other words, if all the rows have three <td>s, then the table has three columns. If one row contains four <td>s and all the others contain two, the browser displays the table with four columns, adding blank cells to the shorter rows. HTML 4.01 includes an advanced system for describing table structure that includes explicit column tags. This system is discussed in the "Row and Column Groups" section of this chapter.

One of the tricks of designing tables is understanding what aspects of the table are controlled at the table, row, and cell levels. Table-level controls

At the table level (using attributes within the <table> tag outlined previously), you can control:

  • The width of the table and its position on the page

  • The thickness of the border around the table and between cells

  • The spacing within and between cells (using cellpadding and cellspacing, respectively)

  • The background color of all its cells

13.3.2. Spanning Rows and Columns

Cells in a table can occupy the space of more than one cell in a row or column. This behavior is set within the <th> or <td> tags using the colspan and rowspan attributes.

13.3.3. Row and Column Groups

Internet Explorer 3.0 introduced a system for grouping rows and columns so they can be treated as units by style sheets or other HTML formatting tags. Row and column groups are mostly advantageous for long, complex tables containing actual data (as opposed to tables used strictly for page layout).

The system is reflected in the HTML 4.01 specification for tables, and it is now supported by Netscape 6 and other standards-compliant browsers. However, support for row and column groups is far from universal as of this writing, so keep them in mind but use them with caution. With careful coding, you can code tables with row and column groups in a way that will not disrupt display in older browsers.

The following is a brief introduction to row and column groups. For more information and examples, see the tables section of the HTML 4.01 specification (http://www.w3c.org/TR/html4/struct/tables.html). There is a useful article demonstrating the use of row and column groups at CNET's Builder.com at http://www.builder.com/Authoring/Tagmania/020700/. Sample HTML

Example 13-1 is a bare-bones example of how row and column groups are integrated into the HTML table structure. Figure 13-4 shows the result.

Figure 13-4

Figure 13-4. A table using the column and row groups to organize structure

Note again that row and column groups and their attributes are not universally supported at this time and can cause display problems. For instance, a browser that supports the <tfoot> element looks for it in the beginning of the document but knows to put its contents at the bottom of each page. In browsers that don't support this table structure, the footer information would be the second thing displayed on the page and would not be displayed again.

Example 13-1. Column and row groups

<CAPTION>Table Description</CAPTION>

   <COL span=2 width=100>
   <COL span=1 width=50>
<THEAD valign="top"> (B)  
   <TH>Heading 1</TH><TH>Heading 2</TH><TH>Heading 3</TH>

<TFOOT> (C)  
   <TD>Footer 1</TD><TD>Footer 2</TD><TD>Footer 3</TD>

<TBODY>   (D)
   <TD>Cell Data 1</TD><TD>Cell Data 2</TD><TD>Cell Data 3</TD>


This table has a total of three columns. The <colgroup> element identifies the columns as part of the same structural group (there may be many column groups in a table, but for simplicity's sake, our example has just one). Within the colgroup, the first <col> element identifies two columns (span=2), each with a width of 100 pixels. The remaining <col> has a width of 50 pixels. If all the columns in the table were to be the same width, the width could have been specified in the <colgroup> element.


The <thead> element defines a header for the table. The contents of the cells it contains may appear at the top of every page of the table.


The <tfoot> defines a footer for the table. The cells in the footer row may appear at the bottom of every page. It should be defined before the actual contents of the table (<tbody>).


The <tbody> element defines a number of rows that appear as the main content of the table.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.