Web Design in a Nutshell

Basic Table Structure

At their most basic, tables are made up cells, arranged into rows and columns. You can control display characteristics for the whole table level, the row level, and for individual cells (there are currently no supported methods for controlling columns as a group).

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:

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

The <table> tag defines the contents of the table. Each row is defined by <tr> tags, and is made up of a number of data (or header) cells. The number of columns is defined by the number of cells in a row. 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 10.1 gives a visual representation of this concept. The image on the left shows that the table consists of two rows and that each consists of two cells. The image on the right shows just how the HTML describes the rows and cells.

Figure 10-1. HTML tables are divided into rows and cells, as shown at left. The <tr> tag creates rows and the <td> tag creates cells, as shown at right.

Header cells use the <th> tag and function the same as data cells but are ...