合法语义表格只需/三件套；border="1"仅用于调试，上线须改css；保障可访问性；table-layout: fixed确保列宽稳定；语义错误将导致js、导出、无障碍全面失效。

直接用 <table> + <code><tr> + <code><th>/<code><td> 三件套，5 行内嵌套就能生成合法、语义清晰、可访问的规整表格——不需要框架、不依赖 JS、不写 CSS 也能立刻看到结构。 <h3>为什么不用 border="1" 就看不见表格？</h3> <p>浏览器默认 <code>border 为 0，<table> 本身不渲染可见边框。新手常误以为“代码没生效”，其实是视觉反馈缺失。 <ul> <li> <code>border="1" 是调试阶段最直觉的方式：加了立刻出线，能快速验证嵌套是否正确

上线前必须替换为 CSS：border-collapse: collapse + border: 1px solid #ccc，否则默认 border-collapse: separate 会产生双倍边框间隙

如果加了 border="1" 还不显示，检查外层 CSS 是否有 table { border: none !important } 类似强制清除规则

表头必须用 <th>，别用 <code><td> + <code>font-weight

<th> 不只是“看起来加粗居中”，它携带语义：告诉屏幕阅读器这是列名，影响表格导航（如按 Ctrl+Alt+→ 跳列）、导出 CSV 的字段识别、以及 JS 操作时 <code>document.querySelector('thead th') 的可靠性。

• 同一行混用 <th> 和 <code><td>（比如 <code><th>姓名</th> <td>张三</td>）会破坏行列逻辑，辅助技术可能读错上下文
• 需要左对齐表头？直接加 style="text-align: left"，不要为了对齐改用 <td> <li>第一行全用 <code><th>，后续所有行统一用 <code><td>，结构最稳 <h3> <code>table-layout: fixed 是列宽稳定的唯一可控方式

默认 table-layout: auto 会让浏览器扫描全部内容再计算列宽，一列塞进长文本，整列撑开，其他列被压缩；后续 JS 动态插入新行还可能触发重排，导致抖动。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须显式设 style="table-layout: fixed; width: 100%"，否则列宽不可预期
• 列宽由第一行的 <col> 或 <th>/<code><td> 的 <code>width 属性决定；<col> 必须写在 <thead> 之前，Safari 等浏览器才会识别 <li>示例：<pre class="brush:php;toolbar:false;"></pre> <table style="table-layout: fixed; width: 100%;"> <col style="width: 20%"> <col style="width: 50%"> <col style="width: 30%"> <thead><tr> <th>ID</th> <th>姓名</th> <th>备注</th> </tr></thead> <tbody><tr> <td>1001</td> <td>张三</td> <td>超长文本不会撑开第三列</td> </tr></tbody> </table> </li> <p>真正容易被忽略的是：表格一旦语义写错（比如该用 <code><th> 的地方用了 <code><td>，或 <code>rowspan 计算漏位），后续用 JS 遍历 rows、导出数据、做无障碍测试时，问题会集中爆发——而此时结构已固化，返工成本远高于初始写对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！