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

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

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   lt div gt           lt table class  table table-hover table-condensed table-striped  gt               lt thead gt                   lt tr gt                       lt th gt Store ID lt  th gt                       lt th gt Name lt  th gt                       lt th gt Address lt  th gt                       lt th gt City lt  th gt                       lt th gt Cost lt  th gt                       lt th gt Sales lt  th gt                       lt th gt Revenue lt  th gt                       lt th gt Employees lt  th gt                       lt th gt Employees H-sum lt  th gt                   lt  tr gt               lt  thead gt               lt tbody data-ng-repeat  storedata in storeDataModel storedata  gt                   lt 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   gt                       lt td gt   storedata store storeId   lt  td gt                       lt td gt   storedata store storeName   lt  td gt                       lt td gt   storedata store storeAddress   lt  td gt                       lt td gt   storedata store storeCity   lt  td gt                       lt td gt   storedata data costTotal   lt  td gt                       lt td gt   storedata data salesTotal   lt  td gt                       lt td gt   storedata data revenueTotal   lt  td gt                       lt td gt   storedata data averageEmployees   lt  td gt                       lt td gt   storedata data averageEmployeesHours   lt  td gt                   lt  tr gt                   lt tr data-ng-show  dayDataCollapse  index   gt                       lt td colspan  2  gt  amp nbsp  lt  td gt                       lt td colspan  7  gt                           lt div gt                               lt div class  pull-right  gt                                   lt table class  table table-hover table-condensed table-striped  gt                                       lt thead gt                                           lt tr gt                                               lt th gt  lt  th gt                                               lt th gt Date  YYYY-MM-dd  lt  th gt                                               lt th gt Cost lt  th gt                                               lt th gt Sales lt  th gt                                               lt th gt Revenue lt  th gt                                               lt th gt Employees lt  th gt                                               lt th gt Employees H-sum lt  th gt                                           lt  tr gt                                       lt  thead gt                                       lt tbody gt                                           lt tr data-ng-repeat  dayData in storeDataModel storedata  index  data dayData  gt                                               lt td class  pullright  gt                                                   lt button type  btn btn-small  title  Click to show transactions for this specific day     data-ng-click    gt  lt i class  icon-list  gt  lt  i gt                                                   lt  button gt                                               lt  td gt                                               lt td gt   dayData date   lt  td gt                                               lt td gt   dayData cost   lt  td gt                                               lt td gt   dayData sales   lt  td gt                                               lt td gt   dayData revenue   lt  td gt                                               lt td gt   dayData employees   lt  td gt                                               lt td gt   dayData employeesHoursSum   lt  td gt                                           lt  tr gt                                       lt  tbody gt                                   lt  table gt                               lt  div gt                           lt  div gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt      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

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

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

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

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

Examples related to html

Examples related to html-table

Examples related to xhtml