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>withcolspan="2"算作2。

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

Answer 2

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

• 第一行需要三个单元格，所以<td>在第一个中放三个 s <tr>。
• 第二行需要两个单元格，第一个是<td>带有rowspan="2"and的单元格，colspan="2"第二个是<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>