table values

how NN and IE handle table values

page 1 of 1

page 1
• simple table example
• increasing padding and spacing
• breaking the table

simple table example

Below is a simple table example. To more easily see how a table's values change the page formatting, we are going to nest the example table inside of another table. The outer table has a gif in it's topmost cell that will serve to help measure the outer table's column width. I am setting the outer table's background to red.

Below is the code of the outer table.

<table bgcolor=red border=1 width=100
cellspacing=0 cellpadding=0 align=center>
<tr>
<td><img src="ruler.gif"
vspace=0 hspace=0 height=20 width=100></td>
</tr>
<tr><td></td></tr>
</table>

There are two rows. One holds the picture, the second row is empty at this point. Now we will nest a table inside of the empty row.

This table will be as wide as the picture ruler.gif, which is 100 pixels. Like the outer table, we will set CELLSPACING and CELLPADDING to zero.

Here is the code for the inner table.

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

The representations are identical.

increasing padding and spacing

Let's increase the CELLPADDING and CELLSPACING of the inner table to a value of seven pixels. Let's also increase the BORDER thickness of the inner table to four pixels.

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

At this point we haven't been able to break the tables. The tables have been able to maintain their overall width by robbing space from the cells. The data inside the cells is small enough to be aligned with the cellpadding we've requested.

Note the differences between the rendering in NN4.7 and IE5.0. These differences have already been noted the section tables and colors.

breaking the table

Let's increase the CELLPADDING and CELLSPACING to a value of 20 pixels in an attempt to break this table.

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

Now we've been able to break the table. Because of the space needed by CELLPADDING, CELLSPACING, and BORDER, the table now ignores the fixed WIDTH of the outer table. The arrows in each picture point toward the place where you can see the table is wider than the rule gif.