Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple thead/tbody design

Tags:

html

jquery

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.

Code example is

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

Below is what would 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 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.

PS: If interested below is the JQuery I am using for this entire thing.

    <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>  
like image 506
Craig Avatar asked Jul 08 '10 17:07

Craig


People also ask

Can a table have multiple thead and tbody?

You can create row groupings within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table!

Can Tbody be nested?

According to W3C a tbody can't inside another one. Save this answer.

Can you have two thead?

You can have as many <tbody> elements as you want, but no more than one each of <thead> and <tfoot> .

Is it necessary to have Tbody in every table?

It is mostly used when the table has multiple bodies of content. If the data in the table is easily understood to be the tbody then you can safely omit it.


1 Answers

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

like image 128
bobince Avatar answered Oct 25 '22 22:10

bobince