サブカラムを使用してHTMLテーブルを作成するにはどうすればよいですか？

Question

私は、次のような構造を表現するHTMLテーブルを作成したいと思います：

ColumnHeading1   ColumnHeading2 
SubHeading1A SubHeading1B SubHeading2A Subheading2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
... 

どのように私は<table>、<tr>、<th>、<td>ようなタグでこれを行うことができますか？私はColumnHeading2をSubHeading2Aに合わせる方法を知らない。

Answer 1

これは何か？

<table> 
    <tr> 
    <th>ColumnHeading1</th> 
    <th>ColumnHeading2</th> 
    </tr> 
    <tr> 
    <td>SubHeading1A</td> 
    <td>SubHeading1B</td> 
    <td>SubHeading2A</td> 
    <td>SubHeading2B</td> 
    </tr> 
    <tr> 
    <td>data1A</td> 
    <td>data1B</td> 
    <td>data2A</td> 
    <td>data2B</td> 
    </tr> 
</table> 

Answer 2

非常に簡単です。以下のコードをコピーしてcolspan属性を使用すると、複数の列にまたがる表の見出し（th）および細胞（td）を持つことができるようになります

<table> 
    <thead> 
    <tr> 
    <th colspan="2">head1</th> 
      <th colspan="2">head1</th> 
    </tr> 

    <tr> 
    <th>subhead</th> 
    <th>subhead</th> 
    <th>subhead</th> 
    <th>subhead</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    </tbody> 
</table> 

Answer 3

を始めます。同様に、rowspanは見出しとセルが複数の行にまたがるようにします。

table { 
 
    border-collapse: collapse; 
 
} 
 

 
th, 
 
td { 
 
    border: 1px solid #888; 
 
    padding: 0.25em 0.5em; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2">ColumnHeading1</th> 
 
     <th colspan="2">ColumnHeading2</th> 
 
    </tr> 
 
    <tr> 
 
     <th>SubHeading1A</th> 
 
     <th>SubHeading1B</th> 
 
     <th>SubHeading2A</th> 
 
     <th>SubHeading2B</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    </tbody> 
 
</table>