Web Design in a Nutshell, 3rd Edition

Rows and Columns

At the most basic level, tables are divided into rows and columns. CSS 2.1 describes the model as row primary, because rows are identified explicitly in the document structure. Cells are always descendants of rows, not columns. Columns are merely derived based on the number of cells in the rows.

The intersection of all the rows and columns in a table forms a grid and defines a basic grid cell unit. The actual cells (the boxes that contain the content) in the table may be composed of more than one grid cell, as is the case when cells are set to span rows or columns. Figure 22-1 shows the structure of the CSS table model.

Figure 22-1. Table structure

In addition to cell boxes, the CSS visual box model for tables generates (implied) boxes around rows, row groups, columns, column groups, and the table itself. These boxes correspond to the row, rowgroup, col, colgroup, and table elements in HTML. The table caption (identified with the caption element) is treated as its own box as well (as discussed later in this chapter).

One last table box to be aware of is the inline table. Inline tables are block elements that can appear inline (tables are normally block-level elements). Inline tables are created by setting the display property to inline-table. They are not discussed in detail in this chapter, but are sometimes referenced in terms of property application. Only the Opera ...