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"&gt;USA on Wikipedia</a></li>
                <li><a href="http://nationalatlas.gov/"&gt;National Atlas of the United States</a></li>
                <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html"&gt;Historical Documents</a></li>
             </ul>   
        </td>
    </tr>
            <tr><td>some other stuff</td></tr>
    </tbody>
</table>

Below is what would be displayed:

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.)

Answer 2

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).

The thead should only include the actual headings, i.e. "Country - population - Area - Official Languages" The rest is data and belongs in the tbody.

What you have labeled "First row, second row..." are columns, not rows. It seems like you're trying to hide all rows after the first row. Your table should look like this:

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

    <tbody>
    <tr>
        <td>United States of America</td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td id="tableToggle"><div class="arrow"></div></td>
    </tr>
    <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
        <td>Fourth Row</td>
        <td>Fifth Row</td>
    </tr>
    <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"&gt;USA on Wikipedia</a></li>
                <li><a href="http://nationalatlas.gov/"&gt;National Atlas of the United States</a></li>
                <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html"&gt;Historical Documents</a></li>
             </ul>   
        </td>
    </tr>
    <tr>
        <td>some other stuff</td>
    </tr>
    </tbody>
</table>

And you can hide all rows after the first one with something like this (assuming they start hidden):

$('#tableToggle').toggle(
    function() {
        $(this).nextAll().show();
    },
    function() {
        $(this).nextAll().hide();
    });

If you have more than one hideable section in series within the same table use

$(this).nextAll().slice(0, n).show();

where n is the number of rows in a section. Or you could just use a new table for each hideable section.

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.

I don't understand what you're saying here, but it sounds like something that can be solved by controlling the dimensions of the table in your stylesheet as bobince suggests.