合法语义表格只需<table><tr><th>/<td>三件套；border="1"仅用于调试，上线须改CSS；<th>保障可访问性；table-layout: fixed确保列宽稳定；语义错误将导致JS、导出、无障碍全面失效。
直接用 <table> + <tr> + <th>/<td> 三件套，5 行内嵌套就能生成合法、语义清晰、可访问的规整表格——不需要框架、不依赖 JS、不写 CSS 也能立刻看到结构。
为什么不用 border="1" 就看不见表格？
浏览器默认 border 为 0，<table> 本身不渲染可见边框。新手常误以为“代码没生效”，其实是视觉反馈缺失。
-
border="1"是调试阶段最直觉的方式：加了立刻出线，能快速验证嵌套是否正确 - 上线前必须替换为 CSS：
border-collapse: collapse+border: 1px solid #ccc，否则默认border-collapse: separate会产生双倍边框间隙 - 如果加了
border="1"还不显示，检查外层 CSS 是否有table { border: none !important }类似强制清除规则
表头必须用 <th>，别用 <td> + font-weight
<th> 不只是“看起来加粗居中”，它携带语义：告诉屏幕阅读器这是列名，影响表格导航（如按 Ctrl+Alt+→ 跳列）、导出 CSV 的字段识别、以及 JS 操作时 document.querySelector('thead th') 的可靠性。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 同一行混用
<th>和<td>（比如<th>姓名</th><td>张三</td>）会破坏行列逻辑，辅助技术可能读错上下文 - 需要左对齐表头？直接加
style="text-align: left"，不要为了对齐改用<td> - 第一行全用
<th>，后续所有行统一用<td>，结构最稳
table-layout: fixed 是列宽稳定的唯一可控方式
默认 table-layout: auto 会让浏览器扫描全部内容再计算列宽，一列塞进长文本，整列撑开，其他列被压缩；后续 JS 动态插入新行还可能触发重排，导致抖动。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
style="table-layout: fixed; width: 100%"，否则列宽不可预期 - 列宽由第一行的
<col>或<th>/<td>的width属性决定；<col>必须写在<thead>之前，Safari 等浏览器才会识别 - 示例：
<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>
真正容易被忽略的是：表格一旦语义写错（比如该用 <th> 的地方用了 <td>，或 rowspan 计算漏位），后续用 JS 遍历 rows、导出数据、做无障碍测试时，问题会集中爆发——而此时结构已固化，返工成本远高于初始写对。
