如何爲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>