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>