html - 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>