如何创建复杂布局的 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属性。

\n\n

该表有 3 列（单元格）和 3 行：

\n\n

<table>\n<tr>\n    <td>&nbsp;</td>\n    <td>&nbsp;</td>\n    <td>&nbsp;</td>\n</tr>\n<tr>\n    <td colspan="2" rowspan="2">&nbsp;</td>\n    <td>&nbsp;</td>\n</tr>\n<tr>\n   <!-- <td> from prev <tr> here with colspan="2" and rowspan="2" -->\n   <td>&nbsp;</td>\n</tr>\n</table>\xe2\x80\x8b\n

\n\n

确保每行 ( <tr>) 的单元格/列数 ( ) 始终相同<td>。\n计数为<td>的。colspan="2"2

\n\n

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

\n