Styling Tables - Beginning CSS3 - page 327

■ Many HTMl editors, such as Dreamweaver, automatically insert the HTMl entity for a
nonbreaking space (   ) into empty table cells. CSS regards this as content, even though nothing appears in
the cell when viewed in a browser. For a cell to be treated as empty it must not contain anything other than new
lines and whitespace between the opening and closing <td> or <th> tags.

Caution

To demonstrate how this property works, empty-cells.html contains four identical tables in which the
second row contains only empty cells, while the visibility property of the middle cell in the third row has
been set to hidden .
As expected, the content, background color, and borders of the cell in the third row are not displayed.
However, the treatment of the empty row depends on whether it has any borders and on the setting for
border-collapse . As Figure 14-18 shows, the empty row is completely hidden only when border-collapse is
set to collapse and there are no borders around the cells. In all other cases, a small gap is left in place of the
empty row. This behavior is consistent across all browsers in widespread use. In the case of border-collapse:
separate , this is correct. The specification says that empty cells are “transparent through the cell, row, row group,
column and column group backgrounds, letting the table background show through.” However the double
border in the third table appears to be incorrect.

Figure 14-18. The use of cell borders affects the way browsers treat empty cells

Controlling the Width of a Table
Tables are designed to wrap around their content, expanding and contracting depending on the size of the widest
cell in each column and the tallest cell in each row. Although HTML 4.01 and XHTML 1.0 permit the width
attribute on many table elements, it rarely has the desired effect. If an oversized element is placed in a table cell,
the width attribute is ignored. In HTML5, the width attribute has been removed from all table elements in favor
of using CSS.
But how can the CSS width property prevail in the face of the willful nature of table elements? On its own, it
can't. But it can in combination with the table-layout property which accepts two values:
auto This is the default way tables behave, expanding to accommodate the widest
element .
fixed The width of each column is fixed. In HTML5, the size is determined by the
width of each cell in the first table row. In HTML 4.01 and XHTML 1.0, the width
attribute of <colgroup> or <col> elements, if specified, takes precedence .