如何制作带有子列的 HTML 表格？ [复制]答案

【问题标题】：How can I make an HTML table with subcolumns? [duplicate]如何制作带有子列的 HTML 表格？ [复制]
【发布时间】：2017-03-16 13:37:27
【问题描述】：

我想制作一个表达以下结构的 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 对齐。

【问题讨论】：

标签： html

【解决方案1】：

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>

【讨论】：

【解决方案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>

【讨论】：