[  T . E . X . T  ]
[  F . L . O . Ws ]
[  W . I . L . D  ]

Our task was the noble one: create table within another table, with text inside the cell of outer table flew around inner table and width of that inner table would be proportional to the width of the outer table, which, in turn, would be some percentage of the browser window width.

This way, if browser window would be resized, both -- inner and outer table would keep their proportions and text witin the cell of outer table would flow around the inner table.

We seem to be a little lost in our explanations, so let's start with the basic setup proceeding with customization until we reach desired effect or surrender in despair.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

The catch of this experiment was to make table within table and have them both keep their proportions during browser window resizing.

. . . . .

Should be noted, Internet Explorer was able to satisfy our conditions from the very start, while Navigator...

[0] Zero-ground

Outer table:

Inner table:

We pictured something like this (assuming outer table width is 50% of the browser window width) -- inner table is in blue: 



  /-----------------------------------------\
  |text text text text text text  | duh     |
  |/-------------\ text text text |         |
  ||boom boom    | text text text |         |
  ||boom boom    | text text text |         |
  |\-------------/ text text text |         |
  |text text text text            |         |
  \-----------------------------------------/

We stuffed table with text to observe intricate layout effects.

Our initial table had perfectly correct layout, but text didn't flew around the inner table.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


<table border width="50%">
  <tr><td valign=top width="75%">
    text text ...
    <table width="50%">
       <tr><td align=left>boom boom ... </td></tr>
    </table>
    <td width="25%" valign=top>col</td>
  </tr>
</table>

[1] One : simple and wrong.

Our first attempt was to make inner table left-aligned and made text flow around the inner table, the same way it does for images.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom boom boom boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


    text text ...
    <table width="50%" align=left>
       <tr><td align=left>boom boom ... </td></tr>
    </table>
    ...

In Netscape, the only thing gone right was the inner table being 50% width of the container cell. Everything else was wrong: outer table was about 640 pixels constand width and non-resizeable (sic!) and our keyword "duh" was jammed inside the second column.

We have tried the same, but with inner table width unspecified.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom boom boom boom boom boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


    text ...
    <table align=left>
       <tr><td align=left>boom boom ... </td></tr>
    </table>
    ...

Now, the inner table width become 100% the width of the containing cell, and wrapped aroung words acquired bizzare effect: they stomped onto second column! 


 /--------------------------------------------------------------+---\
 |text text text text text text text text text text text text   |duh|
 |text text text text text text text text text text text text   |   |
 |/------------------------------------------------------------\|   |
 ||boom boom boom boom boom boom boom boom boom boom boom boom |text|
 |\------------------------------------------------------------/text|
 |text text text text text text text text                       |   |
 \--------------------------------------------------------------+---/

[2] Linebreak strike.

Manually slicing the text within the inner table with the linebreaks, <BR>, allowed outer table to acquire desired dimentions and resizeability. Of course, inner table will be not resizeable, and manual text formatting is not something we wanted, but at least it allow us to approach desired effect.

Note: width of the inner table needs not to be specified.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom
boom boom
boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


    text ...
    <table align=left>
       <tr><td align=left> boom boom <br>  boom boom <br> ... </td></tr>
    </table>
    ...

If at least one line sticks out, while table gets becomes a mess again.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom
boom boom
boom boom
boom boom boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		nut 


    text ...
    <table align=left>
       <tr><td align=left> 
         boom boom <br>
         boom boom <br>
         boom boom boom boom boom boom boom<br>
       </td></tr>
    </table>
    ...


 /-------------------------------------+---\
 |text text text text text text text   |duh|
 |text text text text text text text   |   |
 |/-----------------------------------\text|
 ||boom boom                          |text|
 ||boom boom                          |text|
 ||boom boom boom boom boom boom boom |text|
 |\-----------------------------------/text|
 |text text text text text text        |   |
 \-------------------------------------+---/

[3] Absolute width works absolutely.

Setting width of inner table in absolute units (pixels) allows us somehow mock up desired effect -- of course if such absolute size allows inner table to fit freely within the outer table (see the disaster above).

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom boom boom boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


    text text ...
    <table width=120 align=left>
       <tr><td align=left>boom boom ... </td></tr>
    </table>
    ...

[4] With colgroups -- no effect.

Specifying <COLGROUP> and number of columns doesn't change situation a bit. As a matter of fact, these attributes seems to be largely ignored by Netscape.

text text text text text text text text text text text text text text text text text text text text text text text text
boom boom boom boom boom boom boom boom boom boom
text text text text text text text text text text text text text text text text text text text text text text text text 		duh 


<table border width="50%" cols=2>
  <colgroup width="75%" valign=top>
  <colgroup width="25%" valign=top>
  <tr><td>
    text text ...
    <table width="50%">
       <tr><td>boom boom ... </td></tr>
    </table>
    <td>col</td>
  </tr>
</table>

[5] Conclusion

After all that hassle we have learned that, at least to the extent of our inventiveness, the desired effect is unattainable with Netscape Navigator browser. As we mentioned earlier, Internet Explorer was capable to mantain width ratio of both tables without any problem (and without text stomping all over the place).

. . . . . . . . . . . .

[base][ground]