Dreamweaver CS5: The Missing Manual

Table Basics

A table is a grid of rows and columns that intersect to form cells, as shown in Figure 7-2. If you’ve used a spreadsheet before, an HTML table should feel familiar.

A table row usually represents a collection of data for a single item. In Figure 7-1, for example, each row holds data for one brand of mower. A table column represents data of a particular type. The first column in Figure 7-1 contains the name of each mower, while the second column displays its cost. A table cell, then, holds one piece of data for a particular row, like the exact price of the Chinook Push-O-Matic Lawn Mower.

You create a table using three HTML tags. You set the boundaries of the table with the <table> tag. Then, within this structure, you create two types of cells, each with a different HTML tag.

You create a cell that contains data—$247.00, for instance—with the <td> or table data tag. Browsers align the text inside a <td> to the left edge of the cell.

A cell that identifies the type of information in a row or column is called a table header, and it uses a <th> or table head tag. Text inside a <th> tag appears centered and in boldface.

In Figure 7-1, all the cells in the table’s top row are table headers, since they identify what type of data appears in the cells below: Brand, Cost, and so on.

Figure 7-2. Rows, columns, and cells make up a table. Cell spacing specifies how many pixels of space ...