HTML and CSS Reference
The layout of tables can get quite complicated, especially because CSS defines two different
ways to calculate table and cell widths, as well as two ways to handle the borders of tables
and elements internal to the table. Figure 1-4 illustrates the components of a table.
Table Arrangement Rules
In general, a table is laid out according to the following principles:
▪ Each row box encompasses a single row of grid cells. All of the row boxes in a table fill
the table from top to bottom in the order they occur in the source document. Thus, the
table contains as many grid rows as there are row elements.
▪ A row group's box encompasses the same grid cells as the row boxes that it contains.
▪ A column box encompasses one or more columns of grid cells. Column boxes are placed
next to each other in the order they occur. The first column box is on the left for left-to-
right languages and on the right for right-to-left languages.
▪ A column group's box encompasses the same grid cells as the column boxes that it con-
▪ Although cells may span several rows or columns, CSS does not define how that happens.
It is instead left to the document language to define spanning. Each spanned cell is a rect-
angular box one or more grid cells wide and high. The top row of this rectangle is in the
row that is parent to the cell. The cell's rectangle must be as far to the left as possible in
left-to-right languages, but it may not overlap any other cell box. It must also be to the
right of all cells in the same row that are earlier in the source document in a left-to-right
language. In right-to-left languages, a spanned cell must be as far to the right as possible
without overlapping other cells and must be to the left of all cells in the same row that
come after it in the document source.
▪ A cell's box cannot extend beyond the last row box of a table or row group. If the table
structure causes this condition, the cell must be shortened until it fits within the table or
row group that encloses it.