The Correct Way to Organize Tables

I have this markup

<div id="standards">
<table border="1">
    <thead>
        <tr>
            <th>Markup</th>
            <th colspan="4">HTML</th>
            <th colspan="4">XHTML</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Version</th>
            <td colspan="3">4.01</td>
            <td>5</td>
            <td colspan="3">1.0</td>
            <td>5</td>
        </tr>
        <tr>
            <th>Flavour</th>
            <td>Strict</td>
            <td>Transitional</td>
            <td>Frameset</td>
         开发者_运维问答   <td>N/A</td>
            <td>Strict</td>
            <td>Transitional</td>
            <td>Frameset</td>
            <td>N/A</td>
        </tr>
        <tr>
            <th>Support</th>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
        </tr>
    </tbody>

My question is should I leave the first and second "tr" in the "tbody" as it is now, or should I move them to "thead" from the point of view of semantics. The table as can be seen, has 3 headers. What would be the correct way of doing this? Here is the fiddle

Fiddle

You can have multiple <tr>'s in <thead> according to the w3 documentation for HTML4 and HTML5 and doing that would fit your table in terms of semantics, so go ahead and move them to the thead.

If this table really has 3 rows of headers (not data), put them in <thead>.

<td> is for actual data in general.

There's nothing wrong with <th> in a table row, it indicates that the cell is header for that particular row.

You're fine the way it is.