This test case is for browsers, which support HTML 4.01 and the CSS2 separate borders model
Test 1-4 test if the browser can handle the
width CSS-property for the
TABLE element correctly. According to CSS2 the
width property means the content width. All kinds of possible borders and paddings are laid out of the width value. Because tables don't have direct actual content, the content width of the
TABLE element is the total width of the widest
TBODY elements. In my test pages the total width of the
TR element. In order to show differences, I have used two width values.
<TABLE width="500" border="50" style="width:550px"
cellspacing="0" cellpadding="0"> +
<img src="WidthTest.gif" width="400" height="200" style="border-width:0">
border attribute of the
TABLE element creates also border to the
TD element, the content width of the
TD element must calculate in this case at the following way:
550-(2x1) = 548, which means that the content width of the table cell should be 148 pixel wider than the image.
The image below the table shows the correct width of the entire
TABLE element = the total width of the table = 650 pixel.
||--- the calculated content width: 548 pixel ---