'HTML - nested table formatting incorrectly

I'm in the process of creating a webpage. It has two columns, the left column contains labels and buttons, and the right column contains editable controls that those labels/buttons apply to.

In the example below I have:

a row (spanning two columns) containing a title
a row (spanning two columns) containing a description of the page
a row (spanning two columns) containing buttons that apply to the entire page
rows (using both columns) with label/data, of which there is one row. The label us customers, and the data is a sub-table with customer data. Additionally are three buttons in the left column.

When I use the following HTML to define where the buttons go:

  <body> 
    <table border=1> <!-- containing title, description and main label/data table -->
      <colgroup> 
        <col span="1" class="labelColumn"> 
        <col span="1" class="dataColumn"> 
      </colgroup>

      <tr> <!-- containing form title, crossing all columns --> 
        <td colspan="2" /> 
          <h1> Customers - Version 3 </h1> 
        </td> 
      </tr>

      <tr> <!-- containing description, crossing all columns --> 
        <td colspan="2" /> 
          <div class = "note" > Shows a list of customers. </div> 
        </td> 
      </tr>

      <tr> <!-- action buttons, not related to any control --> 
        <td colspan="2" /> 
          <button type="button" class="button" style="height:24px;width:100px" id="cmdClose" > Close </button> 
        </td> 
      </tr>

      <tr> <!-- row for data control 'svCustomers' -->
        <td class="labelColumn">
          <div class="labelControl" > Customers </div> 
          <button type="button" class="button" style="height:24px;width:100px" id="cmdAdd" > Add </button> 
          <button type="button" class="button" style="height:24px;width:100px" id="cmdEdit" > Edit </button> 
          <button type="button" class="button" style="height:24px;width:100px" id="cmdDelete" > Delete </button> 
        </td> 
        <td class="dataColumn">
          <table border=1 class="sqllistview-table" id="svCustomers" >
            <colgroup> 
              <col span="1" class="labelColumn" width="9%" /> 
              <col span="1" class="labelColumn" width="14%" /> 
              <col span="1" class="labelColumn" width="29%" /> 
              <col span="1" class="labelColumn" width="18%" /> 
              <col span="1" class="labelColumn" width="28%" /> 
              <tr> 
                <th width="9%" > 
                  <div class="sqllistview-th" > 
                    ID                  </div> 
                </th> 
                <th width="14%" > 
                  <div class="sqllistview-th" > 
                    Code                  </div> 
                </th> ...

I get this:

But I would like the buttons one under the other, so I've created a table inside the <td class="labelColumn"> element, thus:

  <body> 
    <table border=1> <!-- containing title, description and main label/data table -->
      <colgroup> 
        <col span="1" class="labelColumn"> 
        <col span="1" class="dataColumn"> 
      </colgroup>

      <tr> <!-- containing form title, crossing all columns --> 
        <td colspan="2" /> 
          <h1> Customers - Version 3 </h1> 
        </td> 
      </tr>

      <tr> <!-- containing description, crossing all columns --> 
        <td colspan="2" /> 
          <div class = "note" > Shows a list of customers. </div> 
        </td> 
      </tr>

      <tr> <!-- action buttons, not related to any control --> 
        <td colspan="2" /> 
          <button type="button" class="button" style="height:24px;width:100px" id="cmdClose" > Close </button> 
        </td> 
      </tr>

      <tr> <!-- row for data control 'svCustomers' -->
        <td class="labelColumn">
          <div class="labelControl" > Customers </div> 
          <table border=1 > <!-- containing action buttons associated with data control --> 
            <tr> 
              <td> 
                <button type="button" class="button" style="height:24px;width:100px" id="cmdAdd" > Add </button> 
              </td> 
            </tr> 
            <tr> 
              <td> 
                <button type="button" class="button" style="height:24px;width:100px" id="cmdEdit" > Edit </button> 
              </td> 
            </tr> 
            <tr> 
              <td> 
                <button type="button" class="button" style="height:24px;width:100px" id="cmdDelete" > Delete </button> 
              </td> 
            </tr> 
          <table> 
        </td> 
        <td class="dataColumn">
          <table border=1 class="sqllistview-table" id="svCustomers" >
            <colgroup> 
              <col span="1" class="labelColumn" width="9%" /> 
              <col span="1" class="labelColumn" width="14%" /> 
              <col span="1" class="labelColumn" width="29%" /> 
              <col span="1" class="labelColumn" width="18%" /> 
              <col span="1" class="labelColumn" width="28%" /> 
              <tr> 
                <th width="9%" > 
                  <div class="sqllistview-th" > 
                    ID                  </div> 
                </th> 
                <th width="14%" > 
                  <div class="sqllistview-th" > 
                    Code                  </div> 
                </th> ...

but I get this:

Why is my data table shifting down under my first column instead of being to the right of it, and how can I put it back?

html html-table

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'HTML - nested table formatting incorrectly

Sources

Related Questions