HTML - 嵌套表格格式不正确

问题描述

我正在创建网页。它有两列，左列包含标签和按钮，右列包含应用这些标签/按钮的可编辑控件。

在下面的例子中，我有：

包含标题的一行（跨越两列）
包含页面描述的一行（跨越两列）
一行（跨越两列）包含应用于整个页面的按钮
带有标签/数据的行（使用两列），其中有一行。标签uscustomers，数据是一个包含客户数据的子表。此外，左栏中还有三个按钮。

当我使用以下 HTML 定义按钮的位置时：

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

我明白了：

但我希望按钮位于另一个下方，因此我在 <td class="labelColumn"> 元素内创建了一个表格，因此：

  <body> 
    <table border=1> <!-- containing title,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> ...

但我明白了：

为什么我的数据表在我的第一列下向下移动而不是在它的右侧，我该如何把它放回去？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html html-table htmlbutton