Plusieurs thead/tbody design

J'ai une question sur l'ergonomie/design.
Je suis actuellement à l'aide de certains de JQuery pour afficher/masquer des zones entières. Actuellement, ces sont tous dans une grande table avec un thead au très haut comme le principal, en-tête, suivi par un deuxième thead qui est l'en-tête de ce qui serait affiché. La prochaine est une autre thead qui est l'en-tête de ce qui est caché qui s'affiche dans une tbody.
Je sais que c'est horrible de style cependant, le problème que je suis en train de les surmonter, je veux toutes les lignes, les mêmes qu'ils sont tous les affichant le même type de données.

Exemple de Code est

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

Ci-dessous est ce qui est affiché:
le texte d'alt http://img694.imageshack.us/img694/9773/screenshot20100708at100.png
le texte d'alt http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

La raison pour laquelle j'ai fait réellement, c'est parce que généralement, je vais avoir 4 lignes pour l'afficher en-tête (cet exemple est le pays des données) et seulement 3 colonnes à partir de l'en-tête étant caché (première rangée, deuxième, etc). Ces données à l'intérieur a 1 ligne est une URL qui peut être n'importe où à partir de 10 caractères à 100+ (100+) qui résultats dans l'ensemble de l'écran change et mes en-têtes deviennent de 2 ou 3 lignes. Tout ce que je voulais, c'était pour toutes les lignes de rester le même, est-il possible de les associer à seulement 1 tbody avec 1 thead à l'intérieur de la table, de sorte qu'il n'aura pas d'effet sur d'autres. Depuis ce qui est probablement assez déroutant est-il un meilleur moyen d'avoir plusieurs tables, mais le thead de chacun restent les mêmes, peu importe les données dans la tbody.
Je sais qu'il y aura des questions mais toute aide serait grandement appréciée et remarque, je suis complètement ouvert à le faire d'une manière différente. Cependant, ce qui est nécessaire, c'est que les données peuvent être cachées qui est un tableau et aura un en-tête pour cette information. Il peut y avoir un affichables section qui ne doit pas correspondre (cela pourrait être un div) et les données à l'intérieur de chaque section doit garder le même format.

PS: Si cela vous intéresse ci-dessous est le JQuery je suis à l'aide de cette chose entière.

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

OriginalL'auteur Craig | 2010-07-08