如何使用colspan实现带三级分层表头的HTML表格？

实现方案 #

你需要同时配合rowspan（跨行）和colspan（跨列）两个属性实现，完整可直接运行的代码如下：

<style>
/* 基础样式，让表格边框和示意图一致 */
table {
  border-collapse: collapse;
  width: 100%;
}
table, th, td {
  border: 1px solid #000;
  text-align: center;
  padding: 6px;
}
</style>

<table>
  <!-- 第一层表头 -->
  <tr>
    <th rowspan="3">One</th>
    <th colspan="2">Two</th>
    <th colspan="8">Three</th>
  </tr>
  <!-- 第二层表头 -->
  <tr>
    <!-- 第一列被One的rowspan占用，不需要写 -->
    <th colspan="2">Two A</th>
    <th colspan="2">Three A</th>
    <th colspan="2">Three B</th>
    <th colspan="2">Three C</th>
    <th colspan="2">Three</th>
  </tr>
  <!-- 第三层表头（最底层子列） -->
  <tr>
    <!-- 第一列被One的rowspan占用，不需要写 -->
    <th>One A</th>
    <th>One B</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <!-- 表格数据行示例，按需添加即可 -->
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
    <td>数据7</td>
    <td>数据8</td>
    <td>数据9</td>
    <td>数据10</td>
    <td>数据11</td>
    <td>数据12</td>
  </tr>
</table>

核心要点 #

• 先统计最底层子列的总数量，本次总列数为12，每一行的单元格跨列数总和要和总列数对齐，否则会出现单元格错位
• 跨行展示的表头要设置rowspan属性，比如一级表头「One」需要跨3行表头，所以设置rowspan="3"，对应行的第一列不需要重复写单元格
• 跨列展示的表头要设置colspan属性，比如一级表头「Three」需要跨8个子列，所以设置colspan="8"
• 给表格添加border-collapse: collapse属性可以合并单元格边框，和你给出的示意图样式匹配

内容的提问来源于stack exchange，提问作者Indresh Bhargav