Can we have multiple <tbody> tags in same <table>? If yes then in what scenarios should we use multiple <tbody> tags?
This question is related to
html
html-table
xhtml
In addition, if you run a HTML document with multiple <tbody> tags through W3C's HTML Validator, with a HTML5 DOCTYPE, it will successfully validate.
I have created a JSFiddle where I have two nested ng-repeats with tables, and the parent ng-repeat on tbody. If you inspect any row in the table, you will see there are six tbody elements, i.e. the parent level.
HTML
<div>
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Store ID</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody data-ng-repeat="storedata in storeDataModel.storedata">
<tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
<td>{{storedata.store.storeId}}</td>
<td>{{storedata.store.storeName}}</td>
<td>{{storedata.store.storeAddress}}</td>
<td>{{storedata.store.storeCity}}</td>
<td>{{storedata.data.costTotal}}</td>
<td>{{storedata.data.salesTotal}}</td>
<td>{{storedata.data.revenueTotal}}</td>
<td>{{storedata.data.averageEmployees}}</td>
<td>{{storedata.data.averageEmployeesHours}}</td>
</tr>
<tr data-ng-show="dayDataCollapse[$index]">
<td colspan="2"> </td>
<td colspan="7">
<div>
<div class="pull-right">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Date [YYYY-MM-dd]</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
<td class="pullright">
<button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
</button>
</td>
<td>{{dayData.date}}</td>
<td>{{dayData.cost}}</td>
<td>{{dayData.sales}}</td>
<td>{{dayData.revenue}}</td>
<td>{{dayData.employees}}</td>
<td>{{dayData.employeesHoursSum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
( Side note: This fills up the DOM if you have a lot of data on both levels, so I am therefore working on a directive to fetch data and replace, i.e. adding into DOM when clicking parent and removing when another is clicked or same parent again. To get the kind of behavior you find on Prisjakt.nu, if you scroll down to the computers listed and click on the row (not the links). If you do that and inspect elements you will see that a tr is added and then removed if parent is clicked again or another. )
Yes. I use them for dynamically hiding/revealing the relevant part of a table, e.g. a course. Viz.
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
A button can be provided to toggle between everything or just the current day by manipulating tbodies without processing many rows individually.
According to this example it can be done: w3-struct-tables.
Martin Joiner's problem is caused by a misunderstanding of the <caption> tag.
The <caption> tag defines a table caption.
The <caption> tag must be the first child of the <table> tag.
You can specify only one caption per table.
Also, note that the scope attribute should be placed on a <th> element and not on a <tr> element.
The proper way to write a multi-header multi-tbody table would be something like this :
<table id="dinner_table">_x000D_
<caption>This is the only correct place to put a caption.</caption>_x000D_
<tbody>_x000D_
<tr class="header">_x000D_
<th colspan="2" scope="col">First Half of Table (British Dinner)</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">1</th>_x000D_
<td>Fish</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">2</th>_x000D_
<td>Chips</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">3</th>_x000D_
<td>Peas</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">4</th>_x000D_
<td>Gravy</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
<tbody>_x000D_
<tr class="header">_x000D_
<th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">5</th>_x000D_
<td>Pizza</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">6</th>_x000D_
<td>Salad</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">7</th>_x000D_
<td>Oil</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th scope="row">8</th>_x000D_
<td>Bread</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>EDIT: The caption tag belongs to table and thus should only exist once. Do not associate a caption with each tbody element like I did:
<table>
<caption>First Half of Table (British Dinner)</caption>
<tbody>
<tr><th>1</th><td>Fish</td></tr>
<tr><th>2</th><td>Chips</td></tr>
<tr><th>3</th><td>Pease</td></tr>
<tr><th>4</th><td>Gravy</td></tr>
</tbody>
<caption>Second Half of Table (Italian Dinner)</caption>
<tbody>
<tr><th>5</th><td>Pizza</td></tr>
<tr><th>6</th><td>Salad</td></tr>
<tr><th>7</th><td>Oil</td></tr>
<tr><th>8</th><td>Bread</td></tr>
</tbody>
</table>
BAD EXAMPLE ABOVE: DO NOT COPY
The above example does not render as you would expect because writing like this indicates a misunderstanding of the caption tag. You would need lots of CSS hacks to make it render correctly because you would be going against standards.
I searched for W3Cs standards on the caption tag but could not find an explicit rule that states there must be only one caption element per table but that is in fact the case.
Source: Stackoverflow.com