是否可以获取以下表格布局（使用rowspan）？

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获取上面的表格？

谢谢。

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>

Answer 2

尝试一下...

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table td {
    width:60px;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	border-color: black;
}
table th {
    width:60px;
	font-weight: normal;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	border-color: black;
}
table th {
	text-align: left
}

<table class="tg">
  <tr>
    <th rowspan="12">1</th>
    <th rowspan="2">2</th>
    <th rowspan="3">3</th>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">4</td>
  </tr>
  <tr>
    <td rowspan="3">5</td>
  </tr>
  <tr>
    <td rowspan="2">6</td>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">7</td>
    <td rowspan="3">8</td>
  </tr>
  <tr> </tr>
  <tr>
    <td rowspan="2">9</td>
  </tr>
  <tr>
    <td rowspan="3">10</td>
  </tr>
  <tr>
    <td rowspan="2">11</td>
  </tr>
</table>