tables and colors

how NN and IE handle table coloring

page 3 of 5

page 1
• basic four cell table
• adding a border
page 2
• adding a background color
• adding a border color
page 3
• nesting the table
• setting the width
page 4
• increasing the width
• coloring each cell
page 5
• making an empty cell
• forcing the cell open
• forcing open the cell with a space
• useful links

nesting the table

Below is the code for nesting a table with a yellow background 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:

The differences are obvious. In order to generate the border color of the nested table, NN4.7 has reached behind the nested, inner table and used the color it found; the background color of the outer table. To generate the border color of the outer table, it 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.

setting the width

Explicitly setting the width of the nested table to 100% of the width of the outer table produces the same effects as above. Let's set the width of the inner table to half of that of the outer table. We'll use 100 pixels for the outer table and 50 pixels for the inner table.

<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:

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.