How do you display nested tables?

Question

I have a table inside table in html as follows:

<table class="sortable draggable">
    <thead>
        <tr>
            <th class="col-salesOrderId">Order Number</th>
            <th class="col-orderDate">Date of Order</th>
            <th class="col-party">Party</th>
            <th class="col-edit">Edit</th>
            <th class="col-delete">Delete</th>
        </tr>
    </thead>
    <tbody>
        {#orders}
        <tr>
            <td class="col-salesOrderId">{.salesOrderId}</td>
            <td class="col-orderDate">{@formatDate date=orderDate format="DD-MM-YYYY" /}</td>
            <td class="col-party">{.party.partyName}</td>
            <td class="col-edit">
                <button class="btn btn-info btn-edit">
                    &nbsp;
                </button>
            </td>
            <td class="col-delete">
                <button class="btn btn-danger btn-delete">
                    &nbsp;
                </button>
            </td>
        </tr>
        <tr>
          <table class="sortable draggable row-details">
            <thead>
                <tr>
                    <th class="col-itemName">Item Name</th>
                    <th class="col-quantity">Quantity</th>
                    <th class="col-rate">Rate</th>
                    <th class="col-amount">Amount</th>
                </tr>
            </thead>
            <tbody>
                {#items}
                  <tr>
                    <td>{.item.itemName}</td>
                    <td>{.quantity}</td>
                    <td>{.rate}</td>
                      <td>{.quantity * .rate}</td>
                  </tr>
                {/items}
            </tbody>
          </table>
        </tr>
        {/orders}
    </tbody>
</table>

I get the output as shown below:

Why I get such an output? I expected to see nested tables.

Answer 1

You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.

Answer 2

<table>
    <tr>
         <td> <!-- must be in td -->
             <table> <!-- nested table -->
                   <tr>
                         <td>

                         </td>
                   </tr>
             </table>
         </td>
    </tr>
</table>

your nested table need to be inside of td or th.

Answer 3

Your HTML has several errors, starting with this:

{#orders}

As others have mentioned, this is also bad:

<tr>↩          <table class="sortable draggable row-details"

Do yourself a big favor and start using an HTML validator like W3C's . It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)

Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.

  </tr></tbody></table>
                {#items}

                {/items}
            <table class="sortable draggable row-details">
            <thead>
                <tr>
                    <th class="col-itemName">Item Name</th>
                    <th class="col-quantity">Quantity</th>

Answer 4

The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th> .

Inserting <td> or <th> between <tr> and <table> will give the output correctly.

Here is working link for reference: Nested Tables in HTML

Example:

 <table border="1"> <thead> <tr> <th>Item 1 <th>Item 2 </tr> </thead> <tbody> <tr> <td> <table border="1"> <tr> <td>1 <td>2 </tr> <tr> <td>1 <td>2 </tr> </table> <td>A </tr> </tbody> </table>