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

Question

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

请帮我拿到那张桌子。我正在研究 angular 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>