tables and colors

how NN and IE handle table coloring

page 5 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

making an empty cell

Now let's take out the cell data "cell1". We'll color the background of the table yellow and the empty cell red.

<table border=1 bgcolor=yellow width=50 align=left>
<tr>
<td bgcolor=red></td>
<td bgcolor=blue>cell2</td>
</tr>
</table>

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

IE5.0 leaves some kind of default cell size, even though there is no data in the TD tags. NN4.7 shows no cell, just a thick border.

forcing the cell open

Let's try to force the first cell open by setting up two cells in another row, like the earlier tables.

<table border=1 bgcolor=yellow width=50 align=left>
<tr><td bgcolor=red></td><td bgcolor=blue>cell2</td></tr>
<tr><td bgcolor=blue>cell3</td><td bgcolor=red>cell4</td></tr>
</table>

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

NN4.7 refuses to color the cell if it's empty. It provides border where the cell should be.

forcing open the cell with a space

Let's try to force NN4.7 to accept the empty cell by filling it with a control character, like a non-breaking space entity. The entity for a non-breaking space is &nbsp.

<table border=1 bgcolor=yellow 
 width=50 align=left>
<tr><td bgcolor=red>&nbsp;</td>
 <td bgcolor=blue>cell2</td></tr>
<tr><td bgcolor=blue>cell3</td><
 td bgcolor=red>cell4</td></tr>
</table>

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

We see that NN4.7 is now willing to color and hold open the "empty" cell.

useful links

resources
Adaptive Text Colors	an article by paul anderson for cnet builder.com. covers coloring tables and text for css and non-css browers