JQuery templates and tables : use tbody tag

Lets say you have a table, and you want to hide and show a couple of rows with JQuery.  If you're obsessed with div tags, you might try something like this :

<table id="tbData">
<tr><td>Name</td><td>Phone</td></tr>
<div id="phoneList">
</div>
</table>

You set up a template like this :

<script id="phoneTmp" type="text/x-jquery-tmpl">
<tr><td>${firstname},${lastname}</td><td>${address}</td><td>${phone}</td></tr>
</script>

If you do this, your header will show up at the bottom of the table in Firefox, but Internet Explorer will hate you. Or you will hate Internet Explorer. One of those. I get confused. The solution : use tbody tags instead of div tags when you're inserting, showing, or hiding rows in a table with jquery. This forces me to break my longstanding policy of not using any html tags developed after 2000, but it's saved me a lot of headaches.

<table id="tbData">
<tr><td>Name</td><td>Phone</td></tr>
<tbody id="phoneList">
</tbody>
</table>

Click "Result", or the little "play" arrow to see what this code does