Can a tbody be inside another one ?

Question

Is it possible to have an inner tbody inside an outer tbody like this:

here is a sample css:

  <style type="text/css">
    .class1 {background-color:#ff0000;}
    .class2 {background-color:#00ff00;}
  </style>

Here is the sample HTML

<table>
  <tbody id="outer" class="class1">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tbody id="inner" class="class2">
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody> <!-- inner -->
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

My purpose is to apply class1 CSS to the outer tbody and class2 to the inner tbody. But the last TR is consider to be out of the outer tbody as I want it to be inside the outer tbody.

How can i do that?

Answer 1

The way would be to create a nother table and use tbody afterwards:

<table>
  <tbody id="outer" class="show">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan="2">
         <table>
        <tbody id="inner" class="hide">
         <tr>
           <td>...</td>
           <td>...</td>
         </tr>
       </tbody> <!-- inner -->
         </table>
      </td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

Answer 2

Not likely. If all you want is to 'distinguish' some set of rows, I would assign class inner to each row in question (instead of tbody). Then you easily manipulate those rows with any js framework, like $('tr.inner').show();.

Answer 3

While this may work in practice, it is not legal HTML.

However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:

<table> 
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="hide"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
</table> 

Alternatively, you may be able to nest tables, although I wouldn't really recommend that.

Answer 4

Nope, this is not possible. According to the spec, the TBODY element can contain only TR elements.

<!ELEMENT TBODY    O O (TR)+           -- table body -->

what do you want to achieve?

Answer 5

I'm afraid you can't do such thing.

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