企业官网建设流程全解析

1. 为什么标准Markdown表格会逼疯强迫症

如果你写过一段时间技术文档或者博客，肯定遇到过这种让人抓狂的场景：用Markdown画了一张对比表，结果第一列的分类名称重复出现了五六次，整个表格看起来就像复制粘贴出了bug。比如你要对比三款云服务器的配置，CPU那一栏下面有三行，每行都写着“计算型”，内存那一栏下面又重复写着“计算型”，视觉上极其臃肿。

Markdown原生语法在设计之初追求的是“极简”和“可读性”，它的表格解析器遵循的是最朴素的“一行对应一条记录”模型。也就是说，标准Markdown表格里根本不存在“合并单元格”这个概念。你写| A | B |，解析器就老老实实给你渲染成两个独立的单元格，它不会去猜“这两个A是不是应该合并成一个”。

这个限制在轻量级笔记场景下无所谓，但一旦你要做产品对比、参数规格书、课程表、项目排期这类需要视觉分组的表格，原生Markdown就彻底不够用了。我试过用空字符串占位，结果渲染出来是一个个空白格子，边框线还在，看起来像表格被虫蛀了一样。也试过用<br>换行来凑，但那只是把内容挤在一起，并没有真正合并。

真正能解决这个问题的方案，其实就藏在Markdown的一个特性里：绝大多数Markdown解析器都允许直接嵌入HTML标签。这个特性原本是为了让用户在Markdown里写一些原生语法覆盖不到的样式，但它恰好给了我们一个后门——用HTML的rowspan和colspan属性来实现单元格合并。

这篇文章就是把我这些年在这个“后门”里摸爬滚打的经验整理出来。不管你是用Typora写笔记、用GitHub写README、还是用静态站点生成器搭博客，只要你的渲染环境支持HTML内联，这套方法就能直接抄作业。我会从最基础的语法讲起，一直讲到跨平台兼容的坑和自动化生成的技巧，保证你看完就能上手，不用再去翻那些语焉不详的英文文档。

2. 核心原理：Markdown解析器到底怎么处理HTML

2.1 解析器的“放行”机制

要理解为什么嵌入HTML能实现合并单元格，得先搞清楚Markdown解析器的工作流程。当你把一段文本交给解析器时，它并不是一股脑把所有内容都当成Markdown来解析。大多数现代解析器（比如marked、markdown-it、Python-Markdown）采用的是“块级元素优先”策略：它们会先扫描文档，识别出哪些部分是代码块、哪些是HTML块、哪些是纯Markdown段落。

关键点在于：当一个HTML块被识别出来后，解析器通常会跳过对其内部内容的Markdown解析，直接原样输出给浏览器。这意味着你写在<table>标签里的<td rowspan="2">，浏览器会老老实实按照HTML标准来渲染，该合并就合并，该跨行就跨行。

但这里有个分水岭：不同的解析器对“HTML块”的识别规则不一样。有的解析器要求HTML标签必须顶格写，前面不能有缩进；有的解析器允许在列表项里嵌入HTML；还有的解析器（比如某些严格模式下的CommonMark实现）会直接禁用HTML标签。这就是为什么同一段代码在Typora里能正常显示，复制到某个博客平台就变成了一堆乱码。

2.2 rowspan与colspan的底层逻辑

rowspan和colspan这两个属性是HTML表格的“元老级”功能，从HTML 3.2时代就存在了。它们的逻辑非常直观：

• rowspan="N"：当前单元格向下占用N行，被占用的行里对应的位置就“空”出来了，不需要再写<td>。
• colspan="N"：当前单元格向右占用N列，被占用的列里对应的位置同样空出来。

这里有一个新手最容易踩的坑：合并之后，后续行里被“吃掉”的单元格必须省略不写。很多人第一次写的时候，习惯性地把每一行的<td>数量写满，结果表格直接错位，多出来的单元格被挤到下一行去。正确的做法是，先画一个完整的网格，然后数清楚哪些格子被合并覆盖了，把这些格子的<td>删掉。

举个例子，一个3行3列的表格，如果第一列的第一行和第二行要合并，那么第二行就只需要写两个<td>，因为第一列的位置已经被第一行的rowspan="2"占用了。这个逻辑用文字描述有点绕，后面我会用具体的代码示例来演示。

2.3 为什么不用纯HTML写整个表格

看到这里你可能会问：既然HTML这么灵活，那我干脆整个表格都用HTML写不就完了，还用什么Markdown？

这个问题我早期也纠结过。纯HTML写表格确实能实现所有合并效果，但代价是可读性断崖式下跌。你想象一下，一个20行的表格，每行都是<tr><td>...</td><td>...</td></tr>，写的时候眼睛都要看花，改的时候更是灾难——想调整某一列的顺序，得在几十个标签里手动挪位置。而且纯HTML表格在Markdown编辑器里没有语法高亮，没有自动对齐，写起来极其痛苦。

所以我的策略是：能用Markdown就用Markdown，只在需要合并的那几个单元格上用HTML。这样既保留了Markdown表格的清爽结构，又解决了合并的需求。具体来说，就是表头和大部分普通单元格用Markdown语法，只有涉及合并的行用HTML标签来写。这种“混搭”方式在大多数解析器里都能正常工作，也是我实测下来最稳的方案。

3. 从零开始：手把手实现第一个合并单元格

3.1 最小可行示例

先来看一个最简单的场景：一个两行两列的表格，第一列的两个单元格要合并成一个。用纯Markdown写出来是这样的：

| 分类 | 项目 | |------|------| | 前端 | HTML | | 前端 | CSS |

渲染出来“前端”会出现两次。现在用HTML改造，把第一列改成合并：

| 分类 | 项目 | |------|------| | <td rowspan="2">前端</td> | HTML | | CSS |

注意看第二行，原本应该有两个单元格，但因为第一列已经被上面的rowspan="2"占用了，所以第二行只需要写一个<td>，里面放“CSS”。渲染出来的效果就是“前端”跨了两行，“HTML”和“CSS”各自占一行。

这里有一个细节需要说明：第一行里，我用了<td rowspan="2">前端</td>，而不是| <td rowspan="2">前端</td> |。这两种写法在部分解析器里效果一样，但在另一些解析器里，多出来的竖线会被当成普通文本渲染出来。我个人的习惯是在HTML单元格两侧不加竖线，让解析器明确知道这里进入了HTML模式。

3.2 表头合并的写法

表头合并稍微特殊一点，因为表头用的是<th>标签而不是<td>。如果你想让表头的某个单元格跨两列，写法是这样的：

| <th colspan="2">成绩单</th> | <th>备注</th> | |------|------|------| | 语文 | 数学 | 无 | | 90 | 95 | 优秀 |

这个表格的表头第一行，“成绩单”跨了两列，所以后面只需要再写一个“备注”的<th>。第二行是普通的Markdown分隔线，第三行和第四行是数据行。渲染出来就是“成绩单”横跨语文和数学两列。

但这里有个坑：有些解析器不支持在表头行混用Markdown竖线和HTML标签。如果你发现渲染出来的表头错位了，可以尝试把整个表头行都用HTML写：

<tr><th colspan="2">成绩单</th><th>备注</th></tr> |------|------|------| | 语文 | 数学 | 无 |

这种写法更“暴力”，但兼容性反而更好，因为解析器看到<tr>就知道这一行是纯HTML，不会再去尝试解析竖线。

3.3 同时合并行和列

最复杂的场景是既要合并行又要合并列。比如一个课程表，上午的“数学”课连上两节，同时“数学”这个分类又跨了两列。这种嵌套合并需要仔细规划网格。

假设我们要做一个这样的表格：

其中“数学（连堂）”要跨周一的上午和下午两行。代码可以这样写：

| 时段 | 周一 | 周二 | |------|------|------| | 上午 | <td rowspan="2">数学（连堂）</td> | 英语 | | 下午 | 物理 |

注意第二行“下午”后面只写了一个<td>物理</td>，因为“周一”那一列已经被上面的rowspan="2"占用了。如果你不小心多写了一个单元格，整个表格就会向右错位。

4. 跨平台兼容性：哪些地方能跑，哪些地方会翻车

4.1 实测兼容性对照表

我在过去两年里，把同一段合并单元格代码扔到各种平台上测试过，结果差异非常大。下面这张表是我实测的汇总，你可以直接对照自己的使用场景来查：

从这张表能看出来，桌面端编辑器普遍支持良好，在线平台则参差不齐。最稳妥的判断方法是：在你的目标平台上写一个最简单的<td rowspan="2">测试一下，如果渲染出来是合并的，那就放心用；如果显示成了原始文本，那就得换方案。

4.2 静态站点生成器的特殊配置

如果你用Hugo、Hexo、Jekyll这类静态站点生成器搭博客，默认情况下它们可能会把HTML标签转义掉，导致你的合并单元格代码变成一堆<td>。这不是Markdown解析器的问题，而是生成器的安全策略在作祟。

以Hugo为例，它默认使用Goldmark作为Markdown渲染器，而Goldmark出于安全考虑，默认会过滤掉原始HTML。你需要在配置文件里显式开启：

[markup.goldmark.renderer] unsafe = true

这个配置的意思是“我信任自己的内容，允许原始HTML通过”。开启之后，你的rowspan代码就能正常渲染了。Hexo的话，如果用的是hexo-renderer-marked，需要在配置里设置marked.html = true。

注意：开启unsafe意味着你对自己写的所有HTML负责。如果你是从别人那里复制的内容，最好检查一下有没有恶意脚本。不过对于个人博客来说，这个风险基本可以忽略。

4.3 在线平台的降级方案

如果你用的平台确实不支持HTML内联，比如某些在线笔记或者文档工具，那合并单元格这条路就走不通了。这时候有几个降级方案可以考虑：

第一个方案是用空单元格加视觉分隔。虽然不能真正合并，但你可以把重复的内容只写在第一行，下面的行留空，然后在第一行的内容后面加一个向下箭头符号（比如↓），暗示这个分类覆盖下面几行。这种方案虽然不完美，但比重复写五遍“计算型”要清爽得多。

第二个方案是拆成多个小表格。如果合并的目的是为了分组，那不如把一个大表格拆成几个独立的小表格，每个小表格上面加一个二级标题作为分组名。这样既避免了合并的兼容性问题，结构也更清晰。

第三个方案是用图片代替表格。这个方案比较极端，只适合最终输出是PDF或者图片的场景。你可以用Excel或者在线表格工具做好合并效果，然后截图插入。缺点是失去了文本可搜索性，而且修改起来麻烦。

5. 进阶技巧：批量生成与自动化

5.1 用Python脚本自动生成合并表格

手动写rowspan最痛苦的地方在于：当数据量大的时候，你得一行一行数哪些单元格被合并了，稍不留神就数错。我后来写了一个Python小脚本，把结构化数据自动转成带合并单元格的Markdown表格，效率直接翻倍。

思路是这样的：输入一个二维列表，每一行是一个记录，然后指定哪一列需要按相同值合并。脚本会自动计算每个值的连续出现次数，生成对应的rowspan数字，并把被覆盖的单元格留空。

def merge_table(data, merge_col): """ data: 二维列表，第一行是表头 merge_col: 需要合并的列索引（从0开始） """ result = [] # 表头 header = data[0] result.append("| " + " | ".join(header) + " |") result.append("|" + "|".join(["------"] * len(header)) + "|") # 计算合并 rows = data[1:] i = 0 while i < len(rows): row = rows[i] # 计算当前值连续出现多少次 span = 1 while i + span < len(rows) and rows[i + span][merge_col] == row[merge_col]: span += 1 # 生成第一行 cells = [] for j, cell in enumerate(row): if j == merge_col: if span > 1: cells.append(f'<td rowspan="{span}">{cell}</td>') else: cells.append(cell) else: cells.append(cell) result.append("| " + " | ".join(cells) + " |") # 生成后续被合并的行 for k in range(1, span): cells = [] for j, cell in enumerate(rows[i + k]): if j == merge_col: continue # 跳过被合并的列 cells.append(cell) result.append("| " + " | ".join(cells) + " |") i += span return "\n".join(result)

这个脚本的核心逻辑就是“数连续相同的值”，然后根据连续次数决定rowspan的值。你可以把它改造成支持多列合并的版本，原理是一样的，只是需要同时跟踪多个列的连续状态。

5.2 用模板引擎批量渲染

如果你是在做文档站点，数据源是JSON或者YAML，那更优雅的方式是用模板引擎来渲染。比如用Jinja2或者Handlebars，把合并逻辑写在模板里，数据变了表格自动更新。

以Jinja2为例，你可以定义一个宏来处理合并：

{% macro merge_cell(value, span) %} {% if span > 1 %} <td rowspan="{{ span }}">{{ value }}</td> {% else %} <td>{{ value }}</td> {% endif %} {% endmacro %}

然后在模板里循环数据，计算span值。这种方式适合数据频繁变动的场景，比如自动生成的API文档或者配置对比表。

5.3 编辑器片段：一键插入合并模板

如果你只是偶尔需要写合并表格，不想搞那么复杂，那可以在编辑器里设置一个代码片段（snippet）。比如在VS Code里，你可以定义一个快捷键，按下之后自动插入一个带rowspan的表格骨架：

{ "Merged Table": { "prefix": "mtable", "body": [ "| 分类 | 项目 | 说明 |", "|------|------|------|", "| <td rowspan=\"2\">${1:分类A}</td> | ${2:项目1} | ${3:说明1} |", "| ${4:项目2} | ${5:说明2} |", "| <td rowspan=\"2\">${6:分类B}</td> | ${7:项目3} | ${8:说明3} |", "| ${9:项目4} | ${10:说明4} |" ], "description": "插入带合并单元格的Markdown表格" } }

这样你只需要按几个Tab键，就能快速填出一个合并表格，不用每次都从头敲标签。

6. 常见问题与排查技巧实录

6.1 表格错位了怎么办

表格错位是合并单元格最常见的问题，表现就是某一列的内容跑到了另一列下面，或者整个表格右边多出一块空白。根本原因几乎永远是单元格数量对不上。

排查方法很简单：把每一行的<td>数量数一遍。对于没有合并的行，<td>数量应该等于列数；对于有合并的行，<td>数量应该等于列数减去被合并覆盖的列数。比如一个4列的表格，某一行有一个rowspan="2"的单元格，那这一行只需要写3个<td>。

我自己的习惯是，在写合并表格之前，先在纸上画一个网格，把每个格子的坐标标出来，然后标记哪些格子被合并了。这样写的时候就不会漏掉或多余。

6.2 渲染出来显示的是原始HTML代码

这个问题通常是因为解析器没有开启HTML内联支持。不同的工具开启方式不一样：

• VS Code：在设置里搜索markdown.preview.html，确保勾选。
• Hugo：在config.toml里设置unsafe = true。
• Hexo：检查hexo-renderer-marked的配置，设置html: true。
• Jekyll：在_config.yml里设置kramdown: parse_block_html: true。

如果配置都改了还是不行，那可能是平台层面做了限制，比如某些在线编辑器会强制转义所有HTML标签。这种情况下只能换平台或者用降级方案。

6.3 合并单元格后样式丢失

有时候合并是成功了，但合并后的单元格没有继承表格的边框样式，看起来像浮在外面。这是因为HTML表格的边框是由<table>标签的border属性或者CSS控制的，而Markdown解析器生成的表格通常自带一套样式，你手动插入的<td>可能不在那套样式的覆盖范围内。

解决办法是在<td>标签里直接加内联样式：

| <td rowspan="2" style="border: 1px solid #ddd; padding: 8px;">前端</td> | HTML |

这样虽然麻烦一点，但能保证在任何环境下样式一致。如果你不想每个单元格都写一遍，可以在文档开头加一段<style>标签，定义好表格样式，然后让所有<td>继承。

6.4 移动端显示异常

合并单元格在移动端小屏幕上可能会因为列宽不够而显示错乱。特别是当合并的单元格内容很长时，它会把整列的宽度撑开，导致其他列被挤压。

我的经验是，合并单元格里的内容尽量简短，最好控制在4个汉字以内。如果内容确实很长，可以考虑在合并单元格里用<br>换行，或者把详细说明放到表格外面的段落里。另外，可以在<td>里加style="white-space: nowrap;"防止内容换行，但这样可能会让表格横向溢出，需要配合外层容器的滚动条使用。

6.5 常见问题速查表

7. 我的实操心得与避坑清单

写了这么多合并表格，我踩过的坑大概能写满两页纸。这里挑几个最有代表性的心得分享一下，都是文档里不会写的实战经验。

第一个心得是：能不用合并就不用合并。合并单元格虽然视觉上好看，但它增加了表格的复杂度，后期维护成本很高。如果只是为了让分类名称不重复，其实可以用“分组标题行”来代替——在表格中间插入一行，用colspan横跨所有列，写一个大分类名。这种写法比rowspan简单得多，而且兼容性更好。

第二个心得是：合并的列尽量放在第一列。我试过把合并放在中间列，结果发现很多解析器在处理中间列合并时会出现对齐问题，特别是当合并列后面的列数不一致时。放在第一列的话，解析器处理起来最稳定，视觉上也最符合阅读习惯。

第三个心得是：写完一定要在目标平台预览。不要只在编辑器里看着没问题就发布了，一定要在最终展示的环境里检查一遍。我遇到过好几次在Typora里完美显示，发到博客上就错位的情况。后来养成了习惯，写完先复制到目标平台草稿箱里看一眼，确认没问题再正式发布。

第四个心得是：保留一份纯Markdown版本。如果你的文档需要同时发布到多个平台，而其中有些平台不支持HTML，那最好准备两个版本：一个带合并的富版本，一个不带合并的纯版本。纯版本可以用空单元格加箭头符号来模拟分组效果，虽然不完美，但至少不会显示成乱码。

第五个心得是：用注释标记合并逻辑。在HTML标签旁边加一个<!-- rowspan=2 -->注释，这样过几个月回来看的时候，能快速理解当时为什么这么写。特别是当表格结构复杂的时候，注释能救命。

最后再分享一个小技巧：如果你用的是支持自定义CSS的Markdown编辑器，可以给合并单元格加一个背景色，让合并效果更明显。比如<td rowspan="2" style="background: #f5f5f5;">，这样即使边框样式丢了，读者也能一眼看出这几个格子是一组的。这个技巧在做参数对比表的时候特别好用，视觉分组效果直接拉满。