我如何構造一個表頭，而不是在列中包含多行？

Question

我想建立一個表，如下所示：

我試圖構建HTML表相同，但有麻煩。表頭必須準確。任何幫助是有益的

Answer 1

可以使用rowspan屬性：

th { 
 
    border:1px solid #000; 
 
    height: 20px; 
 
    width: 150px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="4">#</th> 
 
     <th>Name</th> 
 
     <th rowspan="2">Permanent Address</th> 
 
     <th rowspan="2">Type of Job</th> 
 
     <th rowspan="2">Start work</th> 
 
    </tr> 
 
    <tr> 
 
     <th>ID</th> 
 
    </tr> 
 
    <tr> 
 
     <th>M/F</th> 
 
     <th rowspan="2">Contract</th> 
 
     <th rowspan="2">Place of Work</th> 
 
     <th rowspan="2">Work Stops</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Birth</th> 
 
    </tr> 
 
    </thead> 
 
</table>

FYI：還有一個colspan屬性，如果你需要跨越多個列。

Answer 2

試試這個......

body { 
 
    padding: 50px; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
td, 
 
th { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="4">#</td> 
 
     <td>Name</td> 
 
     <td rowspan="2">Permanent Address</td> 
 
     <td rowspan="2">Type of Job</td> 
 
     <td rowspan="2">Start work</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ID</td> 
 
    </tr> 
 
    <tr> 
 
     <td>M/F</td> 
 
     <td rowspan="2">Contract</td> 
 
     <td rowspan="2">Place of Work</td> 
 
     <td rowspan="2">Work Stops</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Birth</td> 
 
    </tr> 
 
    </tbody> 
 
</table>