하위 열로 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

매우 간단합니다. 아래의 코드를 복사

<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

가 colspan 속성은 테이블 제목 (th) 및 여러 열을 걸쳐 세포 (td)가 할 수 시작. 마찬가지로 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>