html - 桌子-如何使其正确放置

在ASP网页上，我有一个包含两个部分的表。列分别有文本、标签、文本框、标签和标签控件。我希望这些列只占用所需的空间。没有设置任何宽度。
这是我桌子的图像：
我要前4列排成一行。这很管用
第5列-第2节的文本很长，因此第1节第5列也变宽。
我每节都用了“身体”。
我试着这样做：把第1节第5栏分成2栏。截面图2的colspan=2。但是，第1节第5栏并没有只占用所需的空间。我怎样才能做到这一点？
这把我逼疯了。如何轻松地设计表格？你有什么工具可以帮助这种桌子吗？任何建议都非常感谢。

最佳答案

<table>
   <tr>
      <td colspan="9">Section 1</td>
   </tr>
   <tr>
      <td>Item</td>
      <td>Description</td>
      <td>Unit</td>
      <td>Unit<br/>Cost</td>
      <td>Total<br/>Cost</td>
      <td colspan="4">Notes</td>
   </tr>
   <tr>
      <td>1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="4"></td>
   </tr>
   <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="4"></td>
   </tr>
   <tr>
      <td>3</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="4"></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="4"></td>
   </tr>
   <tr>
      <td colspan="6">Section-2</td>
      <td colspan="3">Section-3</td>
   </tr>
   <tr>
      <td>Item</td>
      <td>Description</td>
      <td>Unit</td>
      <td>Unit<br/>Cost</td>
      <td colspan="2">Notes</td>
      <td>Item</td>
      <td>Description</td>
      <td>Unit<br/>Cost</td>
   </tr>
   <tr>
      <td>1</td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>