html - 如何创建具有复杂布局的 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> )。一个<td>与 colspan="2"算作 2 .

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