title: Spanning columns in HTML table
body: <p>I'm trying do to a very simple operation of merging two columns in a table.  This seems easy with the colspan, but if I merge different columns without leaving at least one row without any merged columns, the sizing gets completely messed up.  Please see the following example at <a href="http://www.allthingsdope.com/table.html" rel="nofollow noreferrer">http://www.allthingsdope.com/table.html</a> or take a look at and try the following code:</p>
  
  <p>Good:</p>
  
  <pre><code>&lt;table width="700px"&gt;
  &lt;tr&gt;
      &lt;th width="100px"&gt;1: 100px&lt;/th&gt;
      &lt;td width="300px"&gt;2: 300px&lt;/td&gt;
      &lt;td width="200px"&gt;3: 200px&lt;/td&gt;
      &lt;td width="100px"&gt;4: 100px&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th width="100px"&gt;1: 100px&lt;/th&gt;
      &lt;td colspan=2 width="500px" &gt;2 &amp; 3: 500px&lt;/td&gt;
      &lt;td width="100px"&gt;4: 100px&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;th width="100px"&gt;1: 100px&lt;/th&gt;
      &lt;td width="300px"&gt;2: 300px&lt;/td&gt;
      &lt;td colspan=2 width="300px"&gt;3 &amp; 4: 300px&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Bad:</p>
  
  <pre><code>&lt;table width="700px"&gt;
  &lt;tr&gt;
      &lt;th width="100px"&gt;1: 100px&lt;/th&gt;
      &lt;td colspan=2 width="500px" &gt;2 &amp; 3: 500px&lt;/td&gt;
      &lt;td width="100px"&gt;4: 100px&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th width="100px"&gt;1: 100px&lt;/th&gt;
      &lt;td width="300px"&gt;2: 300px&lt;/td&gt;
      &lt;td colspan=2 width="300px"&gt;3 &amp; 4: 300px&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This seems so simple but I cannot figure it out!</p>