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>
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!
According to W3C a tbody can't inside another one. Save this answer.
You can have as many <tbody> elements as you want, but no more than one each of <thead> and <tfoot> .
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.
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
.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With