HTML 中的表格副标题

Question

我正在尝试用 HTML 创建一个表格。它应该看起来像：

但是，我无法做到。

到目前为止，这是我的代码...

<table align="center">
  <thead>
    <tr>
      <th>No.</th>
      <th colspan="3">Types</th>
      <th>Remark</th>
    </tr>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
      <td>Ok</td>
    </tr>
  </tbody>
</table>

Answer 1

在colspan您自己确定的属性旁边，使用rowspan（基本上相同，但垂直）。此外，跳过<thead>或为| A | B | C |零件添加额外的行。我的示例跳过了，<thead>因为它是一种更简单的方法。

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

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

th {
  vertical-align: top;
}

td:empty:after {
  content: "\00a0"; /* HTML entity of   */
}

<table>
  <tr>
    <th rowspan="2">No</th>
    <th colspan="3">Types</th>
    <th rowspan="2">Remark</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>