HTML表格将3列合并为单列作为表头的实现方法咨询

合并HTML表格的3列为1列作为表头，直接使用colspan属性即可，属性值设置为3就代表当前单元格横向合并3列。
你现有代码里的<th colspan="3">写法本身是正确的，要是实际显示效果和预期不符，几乎都是表格整体列数不匹配导致的，需要保证表头行合并后的总列数，和下方所有数据行的总列数完全对应。
下面是完整的实现示例：

<table border="1" style="width: 100%; border-collapse: collapse;">
  <!-- 表头行：两个表头各合并3列，总计占6列 -->
  <tr>
    <th colspan="3">Caution definitive</th>
    <th colspan="3">Retenu de Garantie</th>
  </tr>
  <!-- 数据行：总列数需要和表头合并后的总列数一致，此处共6列 -->
  <tr>
    <td>列1数据</td>
    <td>列2数据</td>
    <td>列3数据</td>
    <td>列4数据</td>
    <td>列5数据</td>
    <td>列6数据</td>
  </tr>
</table>

调试建议 #

• 给table标签添加border属性显示边框，可以快速定位是否是列数不匹配导致的布局错乱
• 样式上加border-collapse: collapse可以合并表格边框，显示效果更规整
• 如果需要纵向合并行，使用rowspan属性即可，用法和colspan完全一致

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