title: Multiple thead/tbody design
body: <p>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.</p>
  
  <p>Code example is</p>
  
  <pre><code>&lt;table id="report"&gt;
      &lt;thead&gt;
      &lt;tr id="header"&gt;
          &lt;th&gt;Country&lt;/th&gt;
          &lt;th&gt;Population&lt;/th&gt;
          &lt;th&gt;Area&lt;/th&gt;
          &lt;th&gt;Official languages&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;td&gt;United States of America&lt;/td&gt;
          &lt;td&gt;306,939,000&lt;/td&gt;
          &lt;td&gt;9,826,630 km2&lt;/td&gt;
          &lt;td&gt;English&lt;/td&gt;
          &lt;td&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;First Row&lt;/td&gt;
              &lt;td&gt;Second Row&lt;/td&gt;
              &lt;td&gt;Third Row&lt;/td&gt;
              &lt;td&gt;Fourth Row&lt;/td&gt;
              &lt;td&gt;Fifth Row&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;
              &lt;img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" /&gt;
              &lt;h4&gt;Additional information&lt;/h4&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Usa"&gt;USA on Wikipedia&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://nationalatlas.gov/"&gt;National Atlas of the United States&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.nationalcenter.org/HistoricalDocuments.html"&gt;Historical Documents&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;   
          &lt;/td&gt;
      &lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;some other stuff&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Below is what would be displayed:
  <a href="http://img694.imageshack.us/img694/9773/screenshot20100708at100.png">alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png</a>
  <a href="http://img822.imageshack.us/img822/9206/screenshot20100708at101.png">alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png</a></p>
  
  <p>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. </p>
  
  <p>PS: If interested below is the JQuery I am using for this entire thing.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;  
      $(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");
          });
      });
  &lt;/script&gt;  
  </code></pre>