Web Design in a Nutshell, 3rd Edition

To see how the basic table elements are applied, consider a simple table with two rows and two columns (four content or “data” cells). The diagram on the left in Figure 13-3 shows the table with its cells and rows labeled in the way they are recognized in HTML. The diagram on the right shows the HTML elements that correspond with each component.

Figure 13-3. Basic table structure

Written out in an HTML source document, the markup for the table in Figure 13-3 would look more like this:

    <table>
    <tr>
         <td>cell 1</td><td>cell 2</td>
    </tr>
    <tr>
         <td>cell 3</td><td>cell 4</td>
    </tr>
    </table>

The entire table is indicated by the table element, which has no content of its own, but acts as a containing element for one or more of table row elements (tr). The table in the example contains two rows. Each tr element, in turn, contains two data cells, which are indicated by the td elements. The cells are the elements that contain real content; the table and tr elements are purely for table structure. A table cell may contain any data that can be displayed in a document, including formatted text, images, multimedia elements, and even other tables.

As mentioned earlier, the table system in HTML is row-primary. 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 cells (three td elements), then the table ...