如何同时使用colspan与rowspan实现跨行跨列的HTML复杂表格表头

你需要调整表头的跨行属性、列结构匹配逻辑，修正后的完整可运行代码如下：

<table border="1">
<caption>
  Poster availability
</caption>
<!-- 定义7列结构：1列海报名 + 5列颜色 + 1列尺寸 -->
<colgroup>
  <col style="width: 150px;">
  <col span="5" style="width: 80px;">
  <col style="width: 120px;">
</colgroup>
<thead>
  <tr>
    <!-- 海报名列跨2行 -->
    <th scope="col" rowspan="2">Poster name</th>
    <!-- Color表头跨5列 -->
    <th scope="col" colspan="5">Color</th>
    <!-- 尺寸列跨2行 -->
    <th scope="col" rowspan="2">Sizes available</th>
  </tr>
  <tr>
    <!-- 第二行5个颜色子表头 -->
    <th scope="col">1</th>
    <th scope="col">2</th>
    <th scope="col">3</th>
    <th scope="col">4</th>
    <th scope="col">5</th>
  </tr>
</thead>
<tbody>
  <!-- 数据行结构：1个海报名 + 5个颜色状态 + 1个尺寸信息 -->
  <tr>
    <th scope="row">Zodiac</th>
    <td>✅</td>
    <td>❌</td>
    <td>✅</td>
    <td>✅</td>
    <td>❌</td>
    <td>S/M/L</td>
  </tr>
  <tr>
    <th scope="row">Arrival</th>
    <td>❌</td>
    <td>✅</td>
    <td>✅</td>
    <td>❌</td>
    <td>✅</td>
    <td>M/L/XL</td>
  </tr>
</tbody>
</table>

关键修改说明 #

• 移除了第一行多余的空td，列总数和结构完全对应需求：1列海报名+5列颜色+1列尺寸
• 给Poster name和Sizes available表头添加rowspan="2"属性，让这两个表头纵向占2行，刚好匹配双排的颜色表头结构
• 修正了无效的colrow属性，列头统一用scope="col"，行内的海报名行头用scope="row"做语义标记
• colgroup的span属性直接绑定5个颜色列，可统一设置这几列的样式，无需单独定义每个col

如果需要调整颜色子项的内容，直接修改第二行thead里的5个th的文本即可，后续tbody的数据行固定按照1+5+1的结构写td就行，不用再处理跨列跨行逻辑。

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