<TABLE BORDER="1" WIDTH="100%" COLS="4">
<TR>
<TD COLSPAN=3 WIDTH="70%">Cell 1 of Row 1 70%</TD>
<TD WIDTH="30%" >Cell 2 of Row 1</TD>
</TR>
</TABLE>
<TABLE BORDER="1" WIDTH="100%" COLS="3">
<TR>
<TD WIDTH="15%">Cell 1 of Row 1 15%</TD>
<TD ALIGN=CENTER WIDTH="70%">Cell 2 of Row 1 70%</TD>
<TD ALIGN=CENTER WIDTH="15%">Cell 3 of Row 1 15%</TD>
</TR>
</TABLE>
| Cell 1 of Row 1 70% | Cell 2 of Row 1 | ||
| Cell 1 of Row 1 15% | Cell 2 of Row 1 70% | Cell 3 of Row 1 15% |
Note that each table has a width parameter set to 100%. The interesting thing here is that the two tables do not line up at the right side. It appears that this edge difference is related to the first cell in the first table. The width of the cell is set to 70% and it spans across three columns. the problem is the HTML parser takes the total width of the cell and then tries to divide that evenly across the three columns it is spanning. This results in a rounding error since 3 does not divide evenly into the specified width. To compensate for this, it looks like the HTML parser actually roundes up to 24% for each column in the span, thus resulting in the extra width on the first table. The second table does not have column spanning in any of the cells and the total width of the columns is set to 100%, so the second table is actually the correct version.
There are a couple of ways to remedy this situation. The first is to back down the specified width of the first cell to 69% (evenly divisible by 3). This results in the corrected output below.
<TABLE BORDER="1" WIDTH="100%" COLS="4">
<TR>
<TD COLSPAN=3 WIDTH="69%">Cell 1 of Row 1 70%</TD>
<TD WIDTH="30%" >Cell 2 of Row 1</TD>
</TR>
</TABLE>
<TABLE BORDER="1" WIDTH="100%" COLS="3">
<TR>
<TD WIDTH="15%">Cell 1 of Row 1 15%</TD>
<TD ALIGN=CENTER WIDTH="70%">Cell 2 of Row 1 70%</TD>
<TD ALIGN=CENTER WIDTH="15%">Cell 3 of Row 1 15%</TD>
</TR>
</TABLE>
| Cell 1 of Row 1 70% | Cell 2 of Row 1 | ||
| Cell 1 of Row 1 15% | Cell 2 of Row 1 70% | Cell 3 of Row 1 15% |
If you look close, you might notice something odd about this solution. The width of the first cell was set to 69%, however, the width of the second cell remained at 30%. Technically we should be 1% off of the full width. The problem is, as soon as you add that extra percent onto the second cell, you get back to where you started.
<TABLE BORDER="1" WIDTH="100%" COLS="4">
<TR>
<TD COLSPAN=3 WIDTH="69%">Cell 1 of Row 1 69%</TD>
<TD WIDTH="31%" >Cell 2 of Row 31% 1</TD>
</TR>
</TABLE>
| Cell 1 of Row 1 69% | Cell 2 of Row 1 31% | ||
| Cell 1 of Row 1 15% | Cell 2 of Row 1 70% | Cell 3 of Row 1 15% |
Unfortunately I do not have an answer for that situation. There is another way to approach this problem. Although you can set the number of columns for a given table in the <TABLE> tag. This appears to be only a hint, because you can still add as many <TD> tags as you want and the table will adjust the columns accordingly. So, here is another alternative. Set the first table to 3 columns. Now add an extra cell at the end of the first row.
<TABLE BORDER="1" WIDTH="100%" COLS="3">
<TR>
<TD COLSPAN=3">Cell 1 of Row 1</TD>
<TD WIDTH="30%" >Extra Cell 2 of Row 30%1</TD>
</TR>
</TABLE>
| Cell 1 of Row 1 | Extra Cell 2 of Row 1 30% | ||
| Cell 1 of Row 1 15% | Cell 2 of Row 1 70% | Cell 3 of Row 1 15% |
In essence, you are taking out the division columns in the first cell and instead assigning one column to the complete 100% available from the table. This amount is total width of the workspace (minus margins etc) minus the width needed by the extra column. This gives us the desired width of 70%.
See you next technote, till then, watch your step, the dog's been out