Несколько конструкций thead/tbody

У меня вопрос об удобстве использования/дизайне. В настоящее время я использую JQuery для скрытия/отображения целых областей. В настоящее время все они находятся в одной большой таблице, а thead на самом верху в качестве основного заголовка, а затем второй thead, который является заголовком того, что будет отображаться. Далее находится еще один апад, который является заголовком того, что скрыто, которое отображается в теле. Я знаю, что это ужасный стиль, но проблема, которую я пытаюсь преодолеть, - это то, что я хочу, чтобы все строки были такими же, как все они отображали один и тот же тип данных.

Пример кода

<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="#" onclick="location.href='http://en.wikipedia.org/wiki/Usa'; return false;">USA on Wikipedia</a></li>
                <li><a href="#" onclick="location.href='http://nationalatlas.gov/'; return false;">National Atlas of the United States</a></li>
                <li><a href="#" onclick="location.href='http://www.nationalcenter.org/HistoricalDocuments.html'; return false;">Historical Documents</a></li>
             </ul>   
        </td>
    </tr>
            <tr><td>some other stuff</td></tr>
    </tbody>
</table>

Ниже показано, что будет отображаться: alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

Теперь причина, по которой я это делал, состоит в том, что, как правило, у меня будет 4 строки для фактического отображаемого заголовка (этот пример - данные страны) и только 3 столбца из скрытого заголовка (первая строка, вторая и т.д.), Эти данные внутри имеют 1 строку - это URL-адрес, который может быть от 10 символов до 100+ (обычно 100+), что приводит к изменению всего отображения, а мои заголовки становятся 2 или 3 строками. В то время как я хотел, чтобы все строки оставались неизменными, есть способ связать только одно тело с 1 ада внутри таблицы, чтобы оно не повлияло на других. Так как это, вероятно, довольно запутанно, есть лучший способ фактически иметь несколько таблиц, но каждый из них остается таким же, независимо от данных, вводимых для тела. Я знаю, что будут вопросы, но любая помощь будет очень признательна и заметьте, я полностью открыт для этого по-другому. Однако требуется, чтобы данные могли быть скрыты, что является таблицей, и будет иметь заголовок для этой информации. Может быть отображаемый раздел, который не должен совпадать (он может быть div), а данные внутри каждого раздела должны иметь одинаковый формат.

PS: Если вы заинтересованы ниже, это JQuery, который я использую для всего этого.

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