Why is <td></td><td></td> not the same as <td colspan="2"></td>

Question

I am replacing multiple TDs with a single TD and a colspan attribute.

However this renders completely differently.

I cannot see why <td></td><td></td> is different to <td colspan="2"></td>

My issue is that the sum of the width of the first 2 TDs is not the same as the width of the colspanned TD. So my cells dont line up.

This happens in IE, FF and Safari.

BONUS QUESTION: Is there any style etc I can apply to ensure the width of the colspan column is equal to the sum of the width of the other TDs being replaced?

Why am I doing this? I am trying to reduce the amount of HTML being generated by DevExpress XtraReports which uses thousands of tiny TDs to position elements. It bloats the HTML many times over, so I am capturing the HTML before it gets sent to the browser and doing some rudimentary search/replace. It's a hack, I know.

Answer 1

The first example will have two sets of margins, padding, css rules, etc. The second will have only one set of rules applied, but applied to an element which fits in two columns.