tables and sizing

how NN and IE handle table sizing

page 1 of 3

table with quarter cells again

nesting the table

Below is the code for nesting a yellow table inside a table with a red background.

<table border=1 bgcolor=red><tr><td>
 
<table border=1 bgcolor=yellow>
<tr><td>cell1</td><td>cell2</td></tr>
<tr><td>cell3</td><td>cell4</td></tr>
</table>
 
</td></tr></table>

we see in NN4.7: we see in IE5.0:

NN4.7 border set to 1 yellow table nested inside red table IE5.0 border set to 1 yellow table nested inside red table

we see in NN6.0:

NN6.0 border set to 1 yellow table nested inside red table

The differences are obvious. NN4.7 and NN6.0, in building their table borders, have reached behind the nested, inner table and used the color they found; the background color of the outer table. They then reached behind the outer table and used the color found there; the page color.

IE5.0 on the other hand has used for each table that table's background color to generate the color of the borders.

§
top

setting the width

Explicitly setting the width of the nested table to 100% of the width of the outer table produces the same effect. Let's set the width of the inner table to half of that of the outer table. We will not use percentages but instead will use pixel values. The outer table will be 100 pixels wide and the inner table will be 50 pixels wide.

<table border=1 bgcolor=red width=100><tr><td>

<table border=1 bgcolor=yellow width=50>
<tr><td>cell1</td><td>cell2</td></tr>
<tr><td>cell3</td><td>cell4</td></tr>
</table>

</td></tr></table>

we see in NN4.7: we see in IE5.0:

NN4.7 border set to 1 yellow table nested inside too small red table IE5.0 yellow table nested inside too small red table

we see in NN6.0:

NN6.0 border set to 1 yellow table nested inside too small red table

Things for each browser are not exactly as we would have guessed. The problem is that the cell contents are now driving the width of the inner table.