必须显式写和，正确使用colspan/rowspan占位逻辑，设置table-layout:fixed和border-collapse:collapse，并添加及scope属性以保障语义与可访问性。
直接用 <table> 搭出来的表格，浏览器确实能立刻渲染出来，但“能显示”不等于“结构可靠”或“后续好改”。尤其加 JS 动态操作、做响应式、对接读屏软件时，裸写 <code><table><tr><td> 很容易踩坑。
<h3>必须显式写 <code><thead> 和 <code><tbody>
<p>很多人省略这两个标签，靠浏览器自动补全。问题在于：<code>tbody 缺失会导致 CSS 选择器如 tbody tr:nth-child(odd) 失效，JS 里想批量操作数据行也得先判断是否存在 tbody，徒增逻辑分支。
<thead> 只能包表头行（即含 <code><th> 的 <code><tr>），且只能出现一次 <li><code><tbody> 包所有数据行；支持多个（比如分页加载新数据时可插入新的 <code><tbody>） <li>把 <code><th> 错放在 <code><tbody> 里是语义错误——屏幕阅读器会把它当普通数据读，不是标题 <h3> <code>colspan和rowspan不是“拉伸”，是“占位”常见错误：写完
<td colspan="3">汇总</td>，还在同一行后面跟两个<td>，结果列数错乱、样式塌陷。本质是没理解 colspan/rowspan 是逻辑占位，不是视觉特效。 <ul><li> <code>colspan="3"表示该单元格占据当前行中连续 3 列 → 后面那行要少写 2 个<td> <li> <code>rowspan="2"表示它向下跨 1 行（共占两行高度）→ 下一行对应列位置必须留空，不能塞<td> <li>用浏览器开发者工具的 Elements 面板看实际渲染出的列数，比肉眼数靠谱得多</li> <h3>边框和列宽必须主动控制，别依赖默认行为</h3> <p>默认 <code>table-layout: auto会让列宽随内容伸缩，动态加载数据时表格会“抖动”；默认边框是分离的（border-collapse: separate），相邻单元格之间有难看缝隙。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 加
style="table-layout: fixed;"到<table>，列宽就由第一行（通常是 <code><thead>）决定 <li>配合 <code>thead th:nth-child(1) { width: 20%; }等方式精确分配列宽 - 加
style="border-collapse: collapse;"让边框真正合并成一条线
最易被忽略的是
<caption></caption>和scope属性——它们不直接影响视觉，但决定了表格是否能被搜索引擎理解、能否被读屏软件正确朗读。没写<caption></caption>的表格，对辅助技术来说就像没贴标签的快递箱；没设scope="col"或scope="row"的<th>，在多级表头下基本等于失效。</th>- 加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
