如何製作帶有子列的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>