Markdown表格进阶玩法：用HTML打造可合并单元格的‘产品功能对比表’（附完整代码）
在技术文档写作中，表格是展示结构化数据的利器。但当你需要对比多个产品的功能差异时，标准的Markdown表格往往显得力不从心——它无法实现单元格合并，导致重复内容大量出现，影响信息传达效率。这时，就需要请出Markdown的"隐藏技能"：内嵌HTML表格。
1. 为什么需要合并单元格的表格？
想象你正在准备一份SaaS产品选型报告，需要对比三个候选产品的功能模块、定价策略和API支持情况。标准Markdown表格会是这样：
| 功能 | 产品A | 产品B | 产品C |
|---|---|---|---|
| 用户管理 | ✓ | ✓ | ✓ |
| 权限系统 | ✓ | ✓ | ✓ |
| 数据导出 | ✓ | ✓ | × |
| 移动端支持 | ✓ | × | × |
这种呈现方式有两个明显问题：
- 重复的✓符号造成视觉干扰
- 无法对功能模块进行分组展示
而通过HTML的rowspan和colspan属性，我们可以创建更专业的对比表：
<table> <tr> <th rowspan="2">功能模块</th> <th colspan="3">支持情况</th> </tr> <tr> <th>产品A</th> <th>产品B</th> <th>产品C</th> </tr> <tr> <td rowspan="2">基础功能</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td colspan="3" style="text-align:center">所有产品均提供完整基础功能套件</td> </tr> </table>2. HTML表格核心属性详解
2.1 合并单元格的两种方式
跨列合并：
colspan="N"- 使单元格横跨N列
- 常用于表头分组或多列数据汇总
跨行合并：
rowspan="N"- 使单元格纵跨N行
- 适合侧边栏分类或重复内容的合并
2.2 属性使用注意事项
删除被合并的单元格：设置
rowspan/colspan后，需删除对应位置的<td>标签浏览器兼容性：所有现代浏览器均支持这两个属性
平台差异：
平台 HTML支持 渲染效果 GitHub ✓ 完美 Confluence ✓ 完美 语雀 ✓ 需开启HTML开关
提示：在Notion中使用时，需要粘贴为"Embed"而非直接粘贴代码
3. 实战：构建产品功能对比表
下面我们以云计算服务对比为例，创建一个完整的可复用模板：
<!-- 产品功能对比表模板 --> <table border="1" style="width:100%; border-collapse: collapse;"> <!-- 表头 --> <tr style="background-color: #f5f5f5;"> <th rowspan="2" style="width:20%">功能类别</th> <th rowspan="2" style="width:30%">具体功能</th> <th colspan="3" style="text-align:center">云服务商</th> </tr> <tr style="background-color: #f5f5f5;"> <th style="width:16%">AWS</th> <th style="width:16%">Azure</th> <th style="width:16%">GCP</th> </tr> <!-- 计算服务 --> <tr> <td rowspan="3">计算</td> <td>虚拟机</td> <td>EC2</td> <td>Virtual Machines</td> <td>Compute Engine</td> </tr> <tr> <td>容器服务</td> <td>ECS/EKS</td> <td>AKS</td> <td>GKE</td> </tr> <tr> <td>无服务器</td> <td>Lambda</td> <td>Functions</td> <td>Cloud Functions</td> </tr> <!-- 存储服务 --> <tr> <td rowspan="2">存储</td> <td>对象存储</td> <td>S3</td> <td>Blob Storage</td> <td>Cloud Storage</td> </tr> <tr> <td>块存储</td> <td>EBS</td> <td>Disks</td> <td>Persistent Disk</td> </tr> </table>关键实现技巧：
- 使用
border-collapse: collapse消除单元格间距 - 通过
style="width:X%"控制列宽比例 - 交替行背景色提升可读性
4. 样式优化与平台适配
4.1 增强表格可读性
<style> .feature-table { font-family: Arial, sans-serif; border-collapse: collapse; width: 100%; } .feature-table th { background-color: #4CAF50; color: white; padding: 12px; text-align: left; } .feature-table td { padding: 8px; border-bottom: 1px solid #ddd; } .feature-table tr:nth-child(even) { background-color: #f2f2f2; } .feature-table tr:hover { background-color: #e6f7ff; } </style> <table class="feature-table"> <!-- 表格内容 --> </table>4.2 各平台适配方案
GitHub/GitLab：
- 直接支持HTML表格
- 推荐使用
<table class="data">获得更好样式
Confluence：
<ac:structured-macro ac:name="html"> <ac:plain-text-body><![CDATA[ <!-- 你的表格代码 --> ]]></ac:plain-text-body> </ac:structured-macro>文档网站生成器：
- Hugo/MkDocs：需开启
unsafe选项 - Docusaurus：默认支持
- Hugo/MkDocs：需开启
5. 高级技巧：动态交互表格
通过添加简单JavaScript，可以实现排序和筛选功能：
<script> function sortTable(n) { let table = document.getElementById("productTable"); let rows = table.rows; let switching = true; while (switching) { switching = false; for (let i = 1; i < (rows.length - 1); i++) { let shouldSwitch = false; let x = rows[i].getElementsByTagName("td")[n]; let y = rows[i + 1].getElementsByTagName("td")[n]; if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } } </script> <table id="productTable"> <tr> <th onclick="sortTable(0)">功能名称 ▲▼</th> <th onclick="sortTable(1)">产品A ▲▼</th> <!-- 其他列 --> </tr> <!-- 表格数据 --> </table>注意：动态功能在某些平台可能受限，建议先在目标环境测试
在实际项目中，我发现最实用的技巧是为关键差异单元格添加颜色标注。例如用红色突出显示缺失功能，绿色表示独家功能。这能让决策者快速抓住重点：
<td style="background-color: #ffdddd; font-weight: bold;">×</td> <td style="background-color: #ddffdd; font-weight: bold;">独家</td>
