html - 是否可以获得以下表格布局（使用行跨度）？

Question

我正在尝试获取如下所示的 HTML 表格：

我目前正在尝试使用以下标记来得到这个（基本上，我将 4 和 6 相乘得到 24 并使用公因数来尝试得到我想要的）：

<table>
    <tbody>
        <tr>
            <td rowspan="24">1</td>
            <td rowspan="4">2</td>
            <td rowspan="6">3</td>
        </tr>
        <tr>
            <td rowspan="4">4</td>
            <td rowspan="6">5</td>
        </tr>
        <tr>
            <td rowspan="4">6</td>
            <td rowspan="6">7</td>
        </tr>
        <tr>
            <td rowspan="4">8</td>
            <td rowspan="6">9</td>
        </tr>
        <tr>
            <td rowspan="4">10</td>
        </tr>
        <tr>
            <td rowspan="4">11</td>
        </tr>
    </tbody>
</table>

但是，上面的标记根本没有完成我想要的。是否可以使用 获得如上图所示的表格rowspan？如果没有rowspan，还有其他方法可以在 HTML 中获取上面的表格吗？

谢谢。

标签： htmllayouthtml-tablerow

Answer 1

您可以使用以下 html 结构实现相同的目的

<table border="1" cellspacing="0" cellpadding="20">
  <tbody>
    <tr>
      <td rowspan="24">1</td>
      <td rowspan="4">2</td>
      <td rowspan="6">3</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">4</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="6">7</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="4">6</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">8</td>
      <td rowspan="6">7</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
      <td rowspan="4">10</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="6">9</td>
    </tr>
    <tr></tr>
    <tr>
      <td rowspan="4">11</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>