Can we have multiple tbody in same table

Question

Can we have multiple  lt tbody gt  tags in same  lt table gt   If yes then in what scenarios should we use multiple  lt tbody gt  tags

User · Answer

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">&nbsp;</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. )

User · Answer

According to this example it can be done  w3-struct-tables

User · Answer

Yes  I use them for dynamically hiding revealing the relevant part of a table  e g  a course   Viz    lt table gt     lt tbody id  day1  style  display none  gt       lt tr gt  lt td gt session1 lt  td gt  lt tr gt       lt tr gt  lt td gt session2 lt  td gt  lt tr gt     lt  tbody gt     lt tbody id  day2  gt       lt tr gt  lt td gt session3 lt  td gt  lt tr gt       lt tr gt  lt td gt session4 lt  td gt  lt tr gt     lt  tbody gt     lt tbody id  day3  style  display none  gt       lt tr gt  lt td gt session5 lt  td gt  lt tr gt       lt tr gt  lt td gt session6 lt  td gt  lt tr gt     lt  tbody gt   lt  table gt    A button can be provided to toggle between everything or just the current day by manipulating tbodies without processing many rows individually

User · Answer

Yes  From the DTD   lt  ELEMENT table       caption    col  colgroup    thead   tfoot    tbody  tr    gt    So it expects one or more  It then goes on to say     Use multiple tbody sections when rules   are needed between groups of table   rows

User · Answer

In addition  if you run a HTML document with multiple  lt tbody gt  tags through W3C s HTML Validator  with a HTML5 DOCTYPE  it will successfully validate

User · Answer

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     lt table gt       lt caption gt First Half of Table  British Dinner  lt  caption gt       lt tbody gt           lt tr gt  lt th gt 1 lt  th gt  lt td gt Fish lt  td gt  lt  tr gt           lt tr gt  lt th gt 2 lt  th gt  lt td gt Chips lt  td gt  lt  tr gt           lt tr gt  lt th gt 3 lt  th gt  lt td gt Pease lt  td gt  lt  tr gt           lt tr gt  lt th gt 4 lt  th gt  lt td gt Gravy lt  td gt  lt  tr gt       lt  tbody gt       lt caption gt Second Half of Table  Italian Dinner  lt  caption gt       lt tbody gt           lt tr gt  lt th gt 5 lt  th gt  lt td gt Pizza lt  td gt  lt  tr gt           lt tr gt  lt th gt 6 lt  th gt  lt td gt Salad lt  td gt  lt  tr gt           lt tr gt  lt th gt 7 lt  th gt  lt td gt Oil lt  td gt  lt  tr gt           lt tr gt  lt th gt 8 lt  th gt  lt td gt Bread lt  td gt  lt  tr gt       lt  tbody gt   lt  table gt    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

User · Answer

Yes you can use them  for example I use them to more easily style groups of data  like this    x000D   x000D  thead th   width  100px  border-bottom  solid 1px  ddd  font-weight  bold    x000D  tbody nth-child odd    background   f5f5f5   border  solid 1px  ddd    x000D  tbody nth-child even    background   e5e5e5   border  solid 1px  ddd    x000D   lt table gt  x000D       lt thead gt  x000D           lt tr gt  lt th gt Customer lt  th gt  lt th gt Order lt  th gt  lt th gt Month lt  th gt  lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  lt td gt Customer 1 lt  td gt  lt td gt  1 lt  td gt  lt td gt January lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 1 lt  td gt  lt td gt  2 lt  td gt  lt td gt April lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 1 lt  td gt  lt td gt  3 lt  td gt  lt td gt March lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D       lt tbody gt  x000D           lt tr gt  lt td gt Customer 2 lt  td gt  lt td gt  1 lt  td gt  lt td gt January lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 2 lt  td gt  lt td gt  2 lt  td gt  lt td gt April lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 2 lt  td gt  lt td gt  3 lt  td gt  lt td gt March lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D       lt tbody gt  x000D           lt tr gt  lt td gt Customer 3 lt  td gt  lt td gt  1 lt  td gt  lt td gt January lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 3 lt  td gt  lt td gt  2 lt  td gt  lt td gt April lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Customer 3 lt  td gt  lt td gt  3 lt  td gt  lt td gt March lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    You can view an example here  It ll only work in newer browsers  but that s what I m supporting in my current application  you can use the grouping for JavaScript etc  The main thing is it s a convenient way to visually group the rows to make the data much more readable  There are other uses of course  but as far as applicable examples  this one is the most common one for me

User · Answer

Martin Joiner s problem is caused by a misunderstanding of the  lt caption gt  tag   The  lt caption gt  tag defines a table caption   The  lt caption gt  tag must be the first child of the  lt table gt  tag   You can specify only one caption per table   Also  note that the scope attribute should be placed on a  lt th gt  element and not on a  lt tr gt  element   The proper way to write a multi-header multi-tbody table would be something like this     x000D   x000D   lt table id  dinner table  gt  x000D       lt caption gt This is the only correct place to put a caption  lt  caption gt  x000D       lt tbody gt  x000D           lt tr class  header  gt  x000D               lt th colspan  2  scope  col  gt First Half of Table  British Dinner  lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 1 lt  th gt  x000D               lt td gt Fish lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 2 lt  th gt  x000D               lt td gt Chips lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 3 lt  th gt  x000D               lt td gt Peas lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 4 lt  th gt  x000D               lt td gt Gravy lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D       lt tbody gt  x000D           lt tr class  header  gt  x000D               lt th colspan  2  scope  col  gt Second Half of Table  Italian Dinner  lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 5 lt  th gt  x000D               lt td gt Pizza lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 6 lt  th gt  x000D               lt td gt Salad lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 7 lt  th gt  x000D               lt td gt Oil lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th scope  row  gt 8 lt  th gt  x000D               lt td gt Bread lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

[html] Can we have multiple <tbody> in same <table>?

Examples related to html

Examples related to html-table

Examples related to xhtml