Web Design in a Nutshell, 2nd Edition

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.

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