Multiple thead/tbody design

Question

I have a question about usability/design. I currently am using some JQuery to hide/show entire areas. Currently these are all in one big table with a thead at the very top as the main header, followed by a second thead which is the header of what would be displayed. Next is another thead which is the header of whatever is hidden which is displayed in a tbody. I know this is horrible style however the problem I am trying to overcome is I want all rows to be the same as they are all displaying the same type of data.

Code example is

<table id="report">
    <thead>
    <tr id="header">
        <th>Country</th>
        <th>Population</th>
        <th>Area</th>
        <th>Official languages</th>
        <th></th>
    </tr>
    </thead>

    <thead>
    <tr>
        <td>United States of America</td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td><div class="arrow"></div></td>
    </tr>
    </thead>

    <thead>
        <tr>
            <td>First Row</td>
            <td>Second Row</td>
            <td>Third Row</td>
            <td>Fourth Row</td>
            <td>Fifth Row</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="5">
            <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
            <h4>Additional information</h4>
            <ul>
                <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
                <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
                <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
             </ul>   
        </td>
    </tr>
            <tr><td>some other stuff</td></tr>
    </tbody>
</table>

Below is what would be displayed: alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

Now the reason I actually made it this way, is because generally I will have 4 rows for the actual displayable header (this example is the country data) and only 3 columns from the header being hidden (first row, second etc). This data inside has 1 row is a URL that can be anywhere from 10 characters to 100+ (100+ is common) which results in the entire display changing and my headers becoming 2 or 3 lines. While what I wanted was for all the rows to stay the same is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others. Since this is probably quite confusing is there a better way to actually have multiple tables but the thead's of each one stay the same no matter the data put in for the tbody. I know there will be questions but any help would be greatly appreciated and note I am completely open to doing this a different way. However what is required is that data can be hidden that is a table and will have a header for that information. There can be a displayable section that doesn't have to match (it could be a div) and the data inside each section should keep the same format.

PS: If interested below is the JQuery I am using for this entire thing.

    <script type="text/javascript">  
    $(document).ready(function(){
        $("#report thead").children("tr:odd").not("#header").addClass("odd");
        $("#report thead").children("tr:odd").not("#header").each(function(index){$(this).attr("id", "id" + index);});

        $("#report thead").children("tr:even").not("#header").addClass("bodyhead");
        $("#report thead:even").not(":first-child").each(function(index){$(this).attr("id", "bhid" + index);});

        $("#report tbody").each(function(index){$(this).attr("id", "bid" + index);});
        //$("#report tbody").each(function(index){$(this).attr("id", "id" + index);});
        //$("#report tbody").children("tr:not(.odd)").hide();
        $("#report tbody").hide();
        $("#report thead:even").not(":first-child").hide();

        //$("#report tbody #id0").show();
        //For header of headers.
        $("#report thead").children("tr:first-child").show();
        $("#report thead").children("tr").not("#header").not(".bodyhead").click(function(){ 
            $("#report #b" + this.id).toggle();
            $("#report #bh" + this.id).toggle();
            $(this).find(".arrow").toggleClass("up");
        });
    });
</script>  

Answer 1

Multiple <thead>​s in a table is invalid HTML. Most of the rows you have in <thead>​s are contain data not headings, so should be in a <tbody>.

is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others.

Yes, use a separate table.

If you want the column widths to be a static size all the way down so that the tables line up with each other, set the styles table-layout: fixed; width: 100% on each table, and set width styles on each of the cells in the first row (or, better <col>​s) that you don't want to share an equal proportion of the layout width.

(It's a good idea to use table-layout: fixed wherever possible, as it's faster to render and much more predictable than the auto table layout algorithm, especially in IE, which has a slightly messed-up implementation of it particularly when you're using colspan.)