如何用纯HTML构建带多级不规则表头的表格？

要实现你需要的这种同时包含单级表头和带子表头的混合结构表格，核心是正确运用colspan（跨列）和rowspan（跨行）属性来合并单元格，避免布局错乱。以下是完整的实现代码：

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <!-- 单级表头：跨行2行 -->
      <th rowspan="2">Major Heading 1</th>
      <!-- 带二级表头的主标题：跨列2列 -->
      <th colspan="2">Major Heading 2</th>
      <!-- 带二级表头的主标题：跨列2列 -->
      <th colspan="2">Major Heading 3</th>
      <!-- 单级表头：跨行2行 -->
      <th rowspan="2">Major Heading 4</th>
      <!-- 如需扩展更多表头，按同样逻辑添加 -->
      <th colspan="2">Major Heading 5</th>
    </tr>
    <tr>
      <!-- 二级表头：对应上方的Major Heading 2 -->
      <th>Minor1</th>
      <th>Minor2</th>
      <!-- 二级表头：对应上方的Major Heading 3 -->
      <th>Minor1</th>
      <th>Minor2</th>
      <!-- 二级表头：对应上方的Major Heading 5 -->
      <th>Minor1</th>
      <th>Minor2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- 数据行列数需和表头总列数一致 -->
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
      <td>col5</td>
      <td>col6</td>
    </tr>
    <!-- 更多数据行示例 -->
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
      <td>data6</td>
      <td>data7</td>
      <td>data8</td>
      <td>data9</td>
      <td>data10</td>
    </tr>
  </tbody>
</table>

关键注意事项： #

• 单级表头（如Major Heading 1、Major Heading 4）设置rowspan="2"，让它们占据表头的两行空间，无需在第二行表头中重复声明。
• 带二级表头的主标题（如Major Heading 2、Major Heading 3）设置colspan="2"，覆盖下方两个二级表头的位置。
• 数据行的列数必须和表头的总列数完全匹配，否则会直接导致表格布局错位。
• 可以通过border、cellpadding等属性快速调整表格基础样式，也可以用CSS做更精细的美化。

内容的提问来源于stack exchange，提问作者Muhaimenul Islam