最简可用html表格需正确嵌套或，用border-collapse:collapse解决双线边框，表头必须用并置于中，添加作标题，确保语义完整与可访问性。
直接用 <table>、<code><tr>、<code><td> 就能做出可用的表格，不需要 JavaScript 或框架——但跳过语义结构或忽略边框塌陷问题，很快就会遇到错位、双线、屏幕阅读器无法识别等实际麻烦。
<h3>怎么写最简可用的 HTML 表格</h3>
<p>最基础的三件套必须嵌套正确：<code><table> 包住所有行，每行用 <code><tr>，每个单元格用 <code><td>（数据）或 <code><th>（表头）。顺序不能乱，也不能漏闭合标签。
<ul><li><code><th> 默认加粗居中，适合列名；<code><td> 是普通内容，不加样式时左对齐
<li>每行的 <code><td> / <code><th> 数量最好一致，否则浏览器会自动补空单元格，容易导致列偏移
<li>别在 <code><table> 外面直接写文字，所有内容必须严格在 <code><tr> 里，否则解析行为不可控
<h3>为什么加了 border="1" 还是看到双线边框</h3>
<p>这是 HTML 表格默认的 <code>cellspacing 和 cellpadding 共同作用的结果：单元格之间有间隙，边框各自渲染，看起来就是“双线”。现代写法应优先用 CSS 控制，而不是依赖旧属性。
- 用
border-collapse: collapse消除间隙，让相邻边框合并为一条线 -
cellspacing="0"可以临时兼容老写法，但已从 HTML5 中废弃，不推荐出现在新项目中 - 如果只加
border="1"不加 CSS，不同浏览器渲染效果可能不一致，尤其在缩放或高 DPI 屏幕下
表头该用 <th> 还是 <code><td>？
<p>用 <code><th>。这不是为了“看起来加粗”，而是为了让表格具备可访问性和语义正确性。
<ul><li>屏幕阅读器靠 <code><th> 的 <code>scope 属性（如 scope="col" 或 scope="row"）定位数据归属，否则读出来就是一串无关联数字
<thead> 区域，比散落在第一行更利于 CSS 定位和 JS 操作
<li>如果只是视觉上想加粗，硬用 <code><td> + <code>style="font-weight:bold"，会丢失语义，后续做响应式或导出 CSV 时容易出错
表格标题和结构分层怎么加才不踩坑
<caption></caption> 必须紧贴 <table> 开始后第一行，且只能有一个；<code><thead>、<code><tbody> 虽非强制，但缺了会导致 CSS 选择器失效或打印样式错乱。
<ul><li>
<code><caption></caption> 是表格的“名字”，不是普通段落，不能用 <p></p> 或 <div> 替代
<li><code><thead> 应包含全部表头行；<code><tbody> 放数据行；<code><tfoot>（如有）要写在 <code><tbody> 之后，浏览器会自动渲染到表格底部
<li>合并单元格（<code>colspan/rowspan）时，务必同步减少对应行/列的 <td> 数量，否则逻辑列数会错，影响所有后续样式计算
<p>真正难的不是写出表格，而是让表格在不同设备、不同辅助工具、不同导出场景下都保持结构完整——这些细节一旦漏掉，后期调试成本远高于初始多写两行语义标签。</p>
</td>
