<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<TITLE>Mozilla Tests: Table Sizing Problems</TITLE>

<STYLE type="text/css">
   TD { border: solid green 1px; }
   TABLE { border: dotted navy 1px; }
   DIV { width: 608px; border: solid 1px red; margin: 1em 0; }
</STYLE>
 
   <p>The table below should have the same width as the red DIV
   below this paragraph. The inner image should just fit. The
   image <em>should not</em> overrun the borders. </div>

   <div></div>
 
   <table width="608">
 
    <tr> 
       <td width="25%">a</td>
       <td width="25%">b</td>
       <td width="25%">c</td>
       <td width="25%">d</td>
    </tr>

    <tr>
      <td colspan="2" width="50%"> eee </td>
      <td colspan="2" width="50%"> f </td>
    </tr>
  
    <tr>
      <td colspan="4"> <img src="../images/wsp600bot.gif"> </td>
    </tr>

   </table>

   <div></div>

   <p>Mozilla makes the table way too small for no apparent reason.</p>

   <p>Here is the same table, one pixel wider:</p>
 
   <table width="609">
 
    <tr> 
       <td width="25%">a</td>
       <td width="25%">b</td>
       <td width="25%">c</td>
       <td width="25%">d</td>
    </tr>

    <tr>
      <td colspan="2" width="50%"> eee </td>
      <td colspan="2" width="50%"> f </td>
    </tr>
  
    <tr>
      <td colspan="4"> <img src="../images/wsp600bot.gif"> </td>
    </tr>

   </table>

   <p>Observations: Fiddle about with the content of the "eee" cell and everything changes.
   Remove any of the three rows and things change. Remove any of the four columns and
   things change. Remove the image and things change.</p>

   <p>(Note: If the image has disappeared from the server, replace it with any 593px
   image you like.)</p>

   <p>See also <a href="tablewidth.html">tablewidth.html</a>.</p>

   <hr>

</BODY>
</HTML>
