如何为html中所有标题的一个标题创建一个表子标题

Question

您好我必须创建一个如下图所示的表格。

请帮我拿到那张桌子。我正在开展角度4项目

Answer 1

您可以在HTML中合并单元格宽度colspan（水平）和rowspan（垂直）属性。

因此，您可以为标题创建2行。在没有子标题的列中，使用rowspan=2垂直合并。如果标题中有两行，请在第一行中使用colspan=X在子标题上方水平合并：

table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: grey;
  border: 1px solid white;
  padding: 0;
  text-align: center;
}

<table>
  <tr>
    <th rowspan="2">Simple header</th>
    <th colspan="2">Combo header</th>
  </tr>
  <tr>
    <!-- skip 1st column because it merges vertically -->
    <th>Sub 1</th>
    <th>Sub 2</th>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>