Multiple thead/tbody design

Question

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 a

Answer 1

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:

    

    

        
Country
        
Population
        
Area
        
Official languages
        

    
    

    

    

        
United States of America
        
306,939,000
        
9,826,630 km2
        
English
        

    
    

        
First Row
        
Second Row
        
Third Row
        
Fourth Row
        
Fifth Row
    
    

        

            
            
Additional information
            

                
USA on Wikipedia
                
National Atlas of the United States
                
Historical Documents
             
   
        
    
    

        
some other stuff
    
    

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.