HTML創建奇形表

Question

有什麼好的方法來創建一個表，看起來像這樣：

      | Horizontal header data1 |Horizontal header data2| 
          | Horizontal header data2 |Horizontal header data2| 
|Vert header 1|Vert header2| data      | data     | 
|Vert header 3|Vert header4| data      | data     | 
|Vert header 5|Vert header6| data      | data     | 

我有一些解決方案，有很多服務器端預處理的。 2個數據結構（水平頭文件，表格的其餘部分），然後在HTML中我只是建立了2個部分的表格。但有沒有其他方法可以做到這一點？

Answer 1

td{ 
 
border: 1px solid #ccc 
 
} 
 
table{ 
 
border-collapse: collapse; 
 
}

<table> 
 
<tr> 
 
    <!-- if you want to combaine 1st 2 columns use <td colspan="2"></td> and delete 2nd <td></td> tag below --> 
 
    <td></td> 
 
    <td></td> 
 
    <td>Horizontal header data1</td> 
 
    <td>Horizontal header data2</td> 
 
</tr> 
 
<tr> 
 
    <td>Vert header 1</td> 
 
    <td>Vert header 1</td> 
 
    <td>data</td> 
 
    <td>data</td> 
 
</tr> 
 
    
 
<tr> 
 
    <td>Horizontal header data1</td> 
 
    <td>Horizontal header data2</td> 
 
    <td>data</td> 
 
    <td>data</td> 
 
</tr> 
 
    
 
<tr> 
 
    <td>Horizontal header data1</td> 
 
    <td>Horizontal header data2</td> 
 
    <td>data</td> 
 
    <td>data</td> 
 
</tr> 
 
</table>