Multiple thead / tbody designs

Question

I have a question about usability / design. I am currently using jQuery to hide / show whole areas. Currently, they are all in one large table, and thead at the very top as the main title, and then the second thead, which is the title of what will be displayed. Next is another apad, which is the title of what is hidden, which is displayed in the body. I know this is a terrible style, but the problem I'm trying to overcome is that I want all the rows to be the same as all of them displaying the same data type.

Code example

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

The following shows what will 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 did this is because, as a rule, I will have 4 rows for the actual displayed header (this example is country data) and only 3 columns from the hidden header (first row, second, etc. .), This data inside has 1 line - this is a URL that can be from 10 characters to 100+ (usually 100+), which leads to a change in the entire display, and my headers become 2 or 3 lines. While I wanted all the rows to remain unchanged, there is a way to associate only one body with 1 hell inside the table so that it does not affect the others. Since this is probably rather confusing, there is a better way to actually have multiple tables, but each of them remains the same, regardless of the data entered for the body. I know that there will be questions, but any help would be greatly appreciated and mind you, I am completely open for this in a different way. However, it is required that the data can be hidden, which is a table, and will have a header for this information. There may be a displayed section that must not match (it may be a div), and the data inside each section must have the same format.

PS: If you're interested below, this is the jQuery that I use for all of this.

  <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

Several <thead> s in the table are invalid HTML. Most of the lines that you have in <thead> s contain data without headings, so they should be in <tbody> .

Is there a way to associate only one body with 1 hell inside the table so that it does not affect others.

Yes, use a separate table.

If you want the column widths to be fully static down so that the tables match, set the styles table-layout: fixed; width: 100% table-layout: fixed; width: 100% in each table and set the width styles for each of the cells in the first row (or better <col> s) that you don’t want to share an equal proportion of the width of the layout.

(It is recommended to use table-layout: fixed wherever possible, since it is faster to render and much more predictable than the automatic table layout algorithm, especially in IE, which has a slightly broken implementation, re using colspan .)

Answer 2

usually I will have 4 rows for the actual displayed header (this is an example - country data) and only 3 columns from the hidden header (first row, second, etc.).

thead should only include actual headers, i.e. "Country - Population - Region - Official Languages." The rest is data and refers to the body.

What you called "First row, second row ...", these are columns, not rows. It seems you are trying to hide all lines after the first line. 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">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> 

And you can hide all the lines after the first with something like this (if they start to hide):

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

If you have more than one hidden partition in the same table, use

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

where n is the number of lines in the section. Or you can simply use a new table for each section to hide.

This data inside has 1 line - this is a URL that can be from 10 characters to 100+ (100+ is shared) resulting in the entire display changing, and my headers become 2 or 3 lines.

I don’t understand what you are saying here, but it seems like you can solve it by controlling the size of the table in the stylesheet, as bobince suggests.