如何在HTML表格中将列拆分为queue和block两个子列

1. 调整HTML表格表头结构 #

核心用colspan和rowspan属性实现表头的层级拆分，假设你需要拆分的是Incoming列为queue和block子列，示例结构如下：

<table border="1">
  <thead>
    <tr>
      <!-- 不需要拆分的列设置 rowspan="2" 跨两行表头 -->
      <th rowspan="2">S</th>
      <!-- 父列头设置 colspan="2" 跨两个子列 -->
      <th colspan="2">Incoming</th>
      <th rowspan="2">Session</th>
      <!-- 其他原有列以此类推 -->
    </tr>
    <tr>
      <!-- 第二行放两个子列头 -->
      <th>queue</th>
      <th>block</th>
    </tr>
  </thead>
  <tbody>
    <!-- 后续数据行每个条目对应子列输出2个td即可 -->
    <tr>
      <td>1</td>
      <td>12</td>
      <td>3</td>
      <td>session_xxx</td>
    </tr>
  </tbody>
</table>

如果是需要拆分数据行内的单列为两个并列单元格，不需要调整表头层级，直接把原有单个<td>替换为两个<td>，表头对应新增一个列头即可。

2. 适配Python生成逻辑 #

你只需要在原来的行数据生成逻辑中，为拆分列额外输出对应两个字段的<td>标签即可，示例原生Python生成逻辑如下：

# 假设你从接口/数据库拿到的行数据结构示例
row_data_list = [
    {"s": 1, "in_queue": 12, "in_block":3, "session":"session_123"},
    {"s": 2, "in_queue": 8, "in_block":1, "session":"session_456"}
]

# 生成tbody内容
tbody_html = ""
for row in row_data_list:
    tbody_html += f"""
    <tr>
        <td>{row['s']}</td>
        <td>{row['in_queue']}</td>
        <td>{row['in_block']}</td>
        <td>{row['session']}</td>
    </tr>
    """
# 最后把表头和tbody拼接成完整表格即可

如果是用Jinja2等模板渲染，直接在模板的行循环中新增两个子列对应的变量占位即可。

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