Whitespace and tables in IE

I was using the excellent displaytag library recently, and had written a table decorator to append some information about each row for a GWT widget to read and use.  The table ended up looking like this:

<table>
<tr>
<td>data</td>
…
</tr>
<script type=”text/javascript”>var …</script><span id=’uniqid’ style=’display:none’>gwt config data</span>
<tr>
<td>data</td>
…
</tr>
<script type=”text/javascript”>var …</script><span id=’uniqid’ style=’display:none’>gwt config data</span>
…
</table>

This worked fine in Firefox and Safari, but IE (versions 6, 7 and 8 ) were displaying whitespace above the table.  I couldn’t figure out why, until I commented out the table and the whitespace went away.  Then I re-enabled the table, and commented out the finishRow method; the whitespace was still gone.

The answer, of course, is that IE doesn’t like stuff outside of the <tr> tags.  Once I wrapped the span tag in <tr><td> tags, the whitespace went away for all browsers:

<table>
<tr>
<td>data</td>
…
</tr>
<tr><td><script type=”text/javascript”>var …</script><span id=’uniqid’ style=’display:none’>gwt config data</span></td></tr>
<tr>
<td>data</td>
…
</tr>
<tr><td><script type=”text/javascript”>var …</script><span id=’uniqid’ style=’display:none’>gwt config data</span></td></tr>
…
</table>

[tags]ie html quirks[/tags]