Multiple Thead/tbody Design

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 m

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

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

<tableid="report"><thead><trid="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><tdid="tableToggle"><divclass="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><tdcolspan="5"><imgsrc="../125px-Flag_of_the_United_States.svg.png"alt="Flag of USA" /><h4>Additional information</h4><ul><li><ahref="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li><li><ahref="http://nationalatlas.gov/">National Atlas of the United States</a></li><li><ahref="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 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.