html - 如何创建一个复杂的 3 列 4 行 HTML 表格？

Question

我正在尝试创建一张像这张照片一样的表格

我对行跨度感到困惑。

标签： htmlcss

Answer 1

您可以使用在线 html 表格生成器进行测试。这是我尝试过的（简单版本，易于理解，不言自明）：

<table border=1>
 <tbody>
  <tr>
   <th colspan="6">Seasons</th>
  </tr>
  <tr>
   <td colspan="2" rowspan="2">March/April</td>
   <td rowspan="5">spring</td>
   <td colspan="3">Cold</td>
  </tr>
  <tr>
   <td colspan="3">Warm</td>
  </tr>
  <tr>
   <td colspan="2" rowspan="3">picture</td>
   <td colspan="3" rowspan="3">Warm</td>
  </tr>
 </tbody>
</table>

所以基本上rowspan，colspan这就是你所需要的。请注意，使用 arowspan创建了一个块，因此<td>下一行中的下一个表数据<tr>将跳过。