html - 这张表是否可以在 HTML 中使用

Question

我想知道这种 HTML 表格布局是否可行？这是我在 Reactjs 中的内容：

我在尝试做 colspan 时遇到错误。

我想要实现的是这样的布局：

非常感谢并非常感谢任何帮助

标签： htmlreactjs

Answer 1

这就是您希望表格的样子，colspan在您需要分列的单元格之后使用。

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  border: 1px solid black;
  width: 60%;
  text-align: left;
}

th,
td {
  padding: 10px;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Name</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td colspan="3">Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>