CHAPTER 4 ■ BOX MODELSTable Box
Problem You want to style the box of a table and the boxes of its cells.
Solution A table is a block box on the outside containing rows of cells on the inside. A table
participates in the block flow, and its cells participate in the table flow of rows and columns.
A table has margins but does not have padding. A cell has padding but does not have
margins. Two additional properties affect the Table Box model: border-collapse and
table-layout. There are many design patterns for laying out cells inside a table. These are
found in Chapters 15 and 16, which discuss tables and cells in detail. This design pattern
focuses on the outside of the table, and how the table interacts with the position of
surrounding elements.
width sets the width of a table. Unlike other boxes, width refers to the outside of the borders
rather than to the inside of its padding.
height sets the height of the table. Unlike other boxes, height refers to the outside of the
borders rather than to the inside of its padding.
margin works differently depending on whether the table is sized, shrink-wrapped, or
stretched. When sized or shrinkwrapped, margins offset the table and offset following
elements. Negative margins can overlap the table with neighboring elements. When a table
is stretched, margins indent the table, which decreases its internal size and shrinks its cells.
border decreases the size of a table’s inner box when a table is sized or stretched. No other
sized box works like this. This unusual behavior occurs because table borders are inside the
box specified by width and height. When the table is shrinkwrapped, border works like
other boxes and increases the size of a table’s outer box.r
overflow does not apply to tables because a table cannot overflow. Only a table’s cells can
overflow. overflow:hidden should be applied to cells to ensure consistent behavior in all
browsers when fixed cells overflow.
border-collapse determines whether adjacent borders combine into a single border. See
Chapters 15 and 16 for details.
table-layout determines whether the table is fixed sized or auto sized based on its
content. See Chapters 15 and 16 for details.
Pattern SELECTOR { display:table; visibility:VALUE;^
width:+VALUE; height:+VALUE;
margin:±VALUE; border:+WIDTH STYLE COLOR;
background:VALUES;
border-collapse:VALUE; table-layout:VALUE; }
Location This design pattern applies to table elements.
Related to Table, Display, Box Model; Width, Height, Sized, Shrinkwrapped, Stretched (Chapter 5);
Margin, Border, Padding, Background, Overflow, Visibility (Chapter 6)
See also Chapter 15 explains tables in much more detail.