如何在html中的另外3列中放置3列

Question

我在html中遇到了这个问题。我无法用文字描述我的问题，所以我要在这里上传图片。 如何使用html中的表来实现这一点。

这就是我尝试过的，只需创建一行，每一行放三行，每一行放另一行，但实际上会产生一些奇怪的东西。

<table border="1">
  <tr>
    <th>Heading1
      <tr>
        <td>idk</td>
        <td>idk1</td>
        <td>idk2</td>
      </tr>
    </th>

    <th>Heading2
      <tr>
        <td>idk</td>
        <td>idk1</td>
        <td>idk2</td>
      </tr>
    </th>

    <th>Heading3
      <tr>
        <td>idk</td>
        <td>idk1</td>
        <td>idk2</td>
      </tr>
    </th>
  </tr>
</table>

或者这应该在理论上有效，但它不会

<table border="1">
  <tr>
    <th>Heading1</th>

    <th>Heading2</th>

    <th>Heading3</th>
  </tr>
  <tr>
    <td>
      <td>idk</td>
      <td>idk1</td>
      <td>idk2</td>
    </td>
    <td>
      <td>idk</td>
      <td>idk1</td>
      <td>idk2</td>
    </td>
    <td>
      <td>idk</td>
      <td>idk1</td>
      <td>idk2</td>
    </td>
  </tr>
</table>

Answer 1

首先，不要使用两个表......

有一些方法可以使标题跨越三列的宽度。 Google搜索术语“css header span three columns”，第一个结果是：

https://www.w3schools.com/tags/att_th_colspan.asp

很容易理解。

完成上述操作后，如果删除子标签，则第二个表格示例将起作用。即改变：

<td>
  <td>idk</td>
  <td>idk1</td>
  <td>idk2</td>
</td>

只是：

<td>idk</td>
<td>idk1</td>
<td>idk2</td>

如果你想要像边框那样漂亮的边框颜色，你可以为每个td应用一个不同的类，并设置3个css定义。