tables and sizing

how NN and IE handle table sizing

page 2 of 3

table with quarter cells again

increasing the width

Let's make the outer table big enough to circumvent this problem.

Before that, though, it is obvious that the default alignment (ALIGN) for the inner table is LEFT. We might as well set the alignment of the inner, yellow table to CENTER since the previous example revealed the default alignment.

<table border=1 bgcolor=red width=400><tr><td> <table border=1 bgcolor=yellow width=50 align=center> <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 at half width IE5.0 yellow table nested inside red table at half width

we see in NN6.0:

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

In both cases, the center table is able to take up 50% of the width of the outer table. Now let's get rid of the outer table and focus on the width of cells in the inner table.

§
top

table with quarter cells

Below is a table that is 400 pixels wide, divided into forths by percentage. We have the last cell in the row with an assumed percentage of 25%; only the first three cells have their widths fixed at 25%.


	
	<table width=200 border=0 cellpadding=0 cellspacing=0>

	<tr>

	<td bgcolor=red width=25%>cell1</td>

	<td bgcolor=blue width=25%>cell2</td>

	<td bgcolor=green width=25%>cell3</td>

	<td bgcolor=purple>cell4</td>

	</tr>

	</table>

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

NN4.7 table divided into quarters IE5.0 table divided into quarters

we see in NN6.0:

NN6.0 table divided into quarters