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

Answer 2

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

在第一行中，您需要三个单元格，因此在第一行中需要三个td

第二行需要两个单元格first td rowspan=2和colspan = 2，第二行没有跨度。

和第三行只需要一个没有任何跨度的单元格。

<table border ="1" cellpadding="0" cellspacing ="0" >
   <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>