合并单元格

colspan 跨列合并、rowspan 跨行合并、复杂表格布局

合并单元格

colspan 跨列合并，rowspan 跨行合并——让表格展示更复杂的结构。

学完本章你将： 掌握 colspan 跨列、rowspan 跨行、复杂表格布局。

colspan 跨列

html

<table border="1">
  <tr>
    <th>项目</th>
    <th colspan="2">2024年</th>
  </tr>
  <tr>
    <td></td>
    <td>上半年</td>
    <td>下半年</td>
  </tr>
  <tr>
    <td>收入</td>
    <td>¥50万</td>
    <td>¥80万</td>
  </tr>
</table>
<!-- "2024年" 跨了 2 列 -->

rowspan 跨行

html

<table border="1">
  <tr>
    <th>姓名</th>
    <td>小明</td>
  </tr>
  <tr>
    <th rowspan="2">联系方式</th>
    <td>xm@test.com</td>
  </tr>
  <tr>
    <td>138****1234</td>
  </tr>
</table>
<!-- "联系方式" 跨了 2 行 -->

组合使用

html

<table border="1">
  <tr>
    <th colspan="2" rowspan="2">编号</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>001</td>
    <td>小明</td>
    <td>85</td>
    <td>92</td>
  </tr>
</table>

🛠️ 学完试试这些工具

📄HTML 美化工具格式化混乱的 HTML 代码 🏷️HTML 实体转换实体编码 ↔ 字符互转 📋JSON 格式化处理 HTML 中的 JSON 数据 🎨颜色转换器HEX/RGB/HSL 颜色转换

内边距与间距

表格美化