How to create three level of rows in table?

Question

Im trying to have table like this:

but with bellow this BEVERAGES one more row that will be inside that td: Something like this:

level 1 
  -- level 2
     -- level 3

With same number of columns.

<tr>
    <td>Alfreds Futterkiste</td>
    <td>
       <table>
         <tr>
            <td>
               aaaaa
                  <table>
                     <tr>
                         <td>
                             aaaaa

                        </td>
                    </tr>
                </table>
            </td>
         </tr>
       </table>
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

Answer 1

Tables are structured by columns within rows. When constructing tables, <td>'s move horizontally and <tr>'s move vertically. The way your codes is setup, everything is taking place within the first row, so it's all going to be inline with itself.

Rather than thinking of this layout as nested tables, think if it as indented rows.

Here's the code:

body {
  font-family: "Helvetica", sans-serif;
  margin: 0;
}

th,
td {
  border-top: solid 1px #ededed;
  text-align: left;
}

.first-row th,
.first-row td {
  border: none;
}

.spacer {
  background-color: #ededed;
}

input {
  border: solid 1px #ccc;
  padding: .25em;
}

input:disabled {
  background-color: #ededed;
}

<table cellspacing="0" cellpadding="15">
  <tbody>
    <tr class="first-row">
      <th colspan="3">&#8595; Alfreds Futterkiste</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="second-row">
      <td class="spacer"></td>
      <th colspan="2">&#8595; Level 2</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="third-row">
      <td class="spacer"></td>
      <td class="spacer"></td>
      <th>&#8595; Level 3</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="fourth-row">
      <th colspan="3">&#8595; Maria Anders</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
    <tr class="fifth-row">
      <th colspan="3">&#8595; Germany</th>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" value="0"></td>
      <td><input type="text" disabled></td>
    </tr>
  </tbody>
</table>

Instead of nesting new tables, we're just indenting the sub-rows by adding empty table cells.

Answer 2

This is an alternate take on what's already been posted, but using different CSS classes to control the indent levels. Also, since it looks like you're doing something with dropdowns, I included a simple example of how that could be done with jQuery as well. It's also worth noting that it's totally valid to have multiple "tbody" elements in your table, which can be a useful way to group top level categories.

$('.level-two').click(function() {
    // Get the data attribute
    var group = $(this).attr('data-group')
    // Get all elements with that class
    $('.'+group).each(function(){
        $(this).fadeToggle()
    });
});

.level-three {
    display: none;
}
.level-two td:first-child {
    padding-left: 20px;
}
.level-three td:first-child {
    padding-left: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <!-- Top Level group -->
  <tbody>
      <tr class="level-one">
          <td>Products</td>
          <td>0</td>
      </tr>

      <tr class="level-two" data-group="beverages">
          <td>Beverages</td>
          <td>0</td>
      </tr>
      <tr class="beverages level-three">
          <td>Water</td>
          <td>0</td>
      </tr>
      <tr class="beverages level-three">
          <td>Tea</td>
          <td>0</td>
      </tr>

      <tr class="level-two" data-group="sandwiches">
          <td>Sandwiches</td>
          <td>0</td>
      </tr>
      <tr class="sandwiches level-three">
          <td>Italian</td>
          <td>0</td>
      </tr>
  </tbody>
  <!-- Another top level group -->
  <tbody>
      <tr class="level-one">
          <td>Foobars</td>
      </tr>
  </tbody>

</table>