Spanning columns in HTML table.
- by Tony
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 http://www.allthingsdope.com/table.html or take a look at and try the following code:
Good:
<table width="700px">
<tr>
<th width="100px">1: 100px</th>
<td width="300px">2: 300px</td>
<td width="200px">3: 200px</td>
<td width="100px">4: 100px</td>
</tr>
<tr>
<th width="100px">1: 100px</th>
<td colspan=2 width="500px" >2 & 3: 500px</td>
<td width="100px">4: 100px</td>
</tr>
<tr>
<th width="100px">1: 100px</th>
<td width="300px">2: 300px</td>
<td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>
Bad:
<table width="700px">
<tr>
<th width="100px">1: 100px</th>
<td colspan=2 width="500px" >2 & 3: 500px</td>
<td width="100px">4: 100px</td>
</tr>
<tr>
<th width="100px">1: 100px</th>
<td width="300px">2: 300px</td>
<td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>
This seems so simple but I can not figure it out!
