Table Width

Each aqua box has an inner width of 400px.

Zeroth Section: Border Edge or Padding Edge

Before the interesting checks, just a quick check that we are sizing tables on the padding edge not the border edge.

All four boxes below should have the same (outer border edge) width. The first two (DIV and TABLE) have thick borders but a short inner width, the second two (DIV and TABLE again) have thin borders but wider inside content width.

See: 'width' for the separated borders model and 'width' for the collapsed borders model (links to diagrams in the CSS2 spec).

First Section: Separated Border Model

Here, the 50% width should be content-edge based for the DIV (first) and padding-edge based for the TABLE (second). Since there is no padding, the boxes should be indistinguishable.

Now, the DIV and TABLE have 1em padding. Thus the TABLE should be 2em shorter. To compensate, the TABLE has been given 1em margins. It should therefore appear centred directly under the first DIV's content.

Now, the DIV has 1em padding, but the table has double sized borders. Thus the TABLE should be the same size as the DIV, just with thicker borders.

Second Section: Collapsing Border Model

Here, the 50% width should be content-edge based for the DIV (first) and the distance between the middle of the left and right borders for the TABLE (second). Since there is a 1em border all the way around, the second box should be exactly 2em shorter than the first. To compensate, the TABLE has been given 1em margins. It should therefore appear centred under the first box.

(End)