如何创建布局复杂的HTML表格？

Question

如何使用HTML创建此表？

​

​

我试过了，但不知道怎么做才对。

我的代码：

<table border=1 cellpadding=0 cellspacing=0>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td colspan="2">&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=2>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

Answer 1

使用rowspan和colspan属性。

表格有3列(单元格)和3行：

<table>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="2" rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
   <!-- <td> from prev <tr> here with colspan="2" and rowspan="2" -->
   <td>&nbsp;</td>
</tr>
</table>​

确保每行(<tr>)的单元格/列计数(<td>)始终相同。带有colspan="2"的<td>算作2。

• 所以第一个<tr>有3个单元格(1+1+1)。
• 第二个也有3个(2+1) ...
• ...最后一个单元具有来自前一个单元的一个单元，该单元具有colspan="2"和rowspan="2"以及最后一个<td>元素，因此3个单元(2+1)

Answer 2

你应该试试这个-表包含3行和3列。

• 第一行需要三个单元格，因此在第一个<tr>.
• The中放置三个<td>需要两个单元格，第一个是具有rowspan="2"和colspan="2"的<td>，第二个是没有跨度的<td>。
• 第三行只需要一个<td>，没有任何跨度。

​

<table border="1" cellpadding="0" cellspacing="0" width="150">
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td colspan="2" rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
</table>

​