用table、tr、td三件套5行代码即可创建合法表格，必须严格嵌套，缺一不可；表头用th保障语义与无障碍；border="1"快速调试边框；rowspan/colspan需精准计算占位，避免错行。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

直接上手就能用：用 ``、``、`

` 三件套，5 行代码就能跑出一个可用表格，不需要任何 CSS 或 JS。

最简结构必须包含 table、tr、td

浏览器只认这三个标签的嵌套关系：table 是容器，里面必须是 tr（行），tr 里只能放 td（数据单元格）或 th（表头单元格）。漏掉任意一层闭合标签，或者把 td 直接扔在 body 里，都会导致渲染错乱或被浏览器自动修正——但修正结果不可控。

• <table><tr><td>姓名</td><td>年龄</td></tr></table> 是最小合法结构
• 不能写成 <table><td>姓名</td></table>（缺 tr）
• 也不能把 tr 放在 table 外面，那它就不是表格行了

加表头用 th，别硬套 td + font-weight

th 不只是“看起来加粗”，它带语义：告诉浏览器和屏幕阅读器“这是列名”。用 td 加 style="font-weight:bold" 看似一样，但无障碍支持会断掉，CSS 重置后样式也容易丢失。

• 第一行用 <th>姓名</th><th>城市</th>，比 <td>姓名</td><td>城市</td> 更可靠
• th 默认居中对齐，如果要左对齐，加 style="text-align:left" 即可，不用改标签
• 混用要小心：同一行里不要 th 和 td 交替出现，语义会混乱

没边框？别急着写 CSS，先试 border 属性

新手常卡在这一步：表格写了，但页面上“看不见”。不是代码错了，是默认 border="0"。老式写法 border="1" 虽然过时，但调试阶段最直觉、最不容易被其他样式覆盖。

• 加 <table border="1"> 立刻看到格子线，确认结构是否正确
• 后续换成 CSS 时，记得加 border-collapse: collapse，否则默认是 separate，边框会双倍粗、有缝隙
• 如果用了 border="1" 还没显示，检查是否被外层 CSS 的 border: none 强制清除了

合并单元格时，rowspan/colspan 会吃掉后续位置

rowspan="2" 不是“额外加一行”，而是“这个单元格占两行高度，所以它所在列的下一行，对应位置不能再放 td”。很多人在这里写出错位表格，是因为没算清楚“被吃掉”的单元格数。

立即学习“前端免费学习笔记（深入）”；

• 写 <td rowspan="2">汇总</td><td>A</td></tr><tr><td>B</td></tr> 是错的——第二行少了一个 td，因为第一行第一个 td 已经占了两行
• 正确写法是第二行只放剩下列的 td，数量要和第一行“未被 rowspan 覆盖”的列数一致
• 建议先画草图，标出每行实际需要几个 td/th，再写代码

真正容易被忽略的是：表格语义一旦写错，后期用 JS 操作（比如用 document.querySelectorAll('tr') 取行）或导出为 CSV 时，逻辑就会偏移。结构清晰比样式漂亮重要得多。