Dreamweaver CS6: The Missing Manual

Table Basics

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

Figure 6-2. Rows, columns, and cells make up a table. Cell spacing specifies how many pixels of space appear between cells. Cell padding, on the other hand, adds space between the four sides of a cell and the cell’s content.

A table row usually represents a collection of data for a single item. In Figure 6-1, for example, each row holds data for one product. A table column represents data of a particular type. The first column in Figure 6-1 contains the name of each product, 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 Rainbow Chia Seeds.

At a minimum, you use three HTML tags to create a table (there are actually quite a few tags related to table design, as you’ll read about soon). You set the boundaries of the table with the <table> tag. Then, within this structure, you add table rows using the <tr> tag. Finally, you divide a table row into individual cells, each of which holds one piece of data.

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

A fourth tag, the <th>, or table head tag, also creates cells within a ...