tables and colors

how NN and IE handle table coloring

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

increasing the width

Let's make the outer table big enough to circumvent the problem with the previous tables. We'll make the outer table 400 pixels wide and the inner table 200 pixels wide.

Before that, though, let's make another change. It is obvious that the default alignment (ALIGN) for the inner table is LEFT. We will set the alignment of the inner, yellow table to CENTER.

<table border=1 bgcolor=red width=400>
<tr><td>
 
   <table border=1
 bgcolor=yellow width=200 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:

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.

coloring each cell

We already know what two cells in a row look in a colored table look like from the previous examples. Now let's color each cell.

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

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