table标签必须包含tr、td或th才能正常渲染，正确结构为table→thead/tbody→tr→th或td，tr不可省略，合并单元格用colspan和rowspan，无边框时结构仍存在，响应式可用overflow-x: auto。
table 标签必须包含 tr、td 或 th 才能正常渲染
浏览器会忽略孤立的 table 或只写 table 和 tbody 却没嵌套行与单元格的情况。常见错误是直接在 table 里写文字，或漏掉 tr——哪怕只有一行数据，也必须用 tr 包一层。
正确结构层级固定为：table → thead/tbody → tr → th 或 td。其中 thead 和 tbody 是可选的，但 tr 不可省。
-
th用于表头单元格，默认加粗+居中，语义上表示列/行标题 -
td用于普通数据单元格，无默认样式 - 同一行内混用
th和td合法，但不推荐——语义混乱容易影响屏幕阅读器
合并单元格要用 colspan 和 rowspan，不能靠空格或CSS模拟
想让一个单元格横跨两列？加 colspan="2"；纵跨三行？加 rowspan="3"。这两个属性值是整数，不是像素或百分比。
注意：合并后，该行/列中对应位置的其他单元格要跳过，否则表格结构会错位。比如某 tr 中第一个 td 有 colspan="2"，那这一行就只需再跟一个 td（而不是两个）来凑齐原本的列数。
错误示例：
<tr> <td colspan="2">姓名</td> <td>年龄</td> <td>城市</td> </tr>——这实际占了 4 列（2+1+1），若其他行只有 3 个
td，就会出现对不齐。
没有 border 属性时表格默认「看不见边框」，但结构依然存在
table 默认无边框、无间距、无填充，单元格紧贴在一起，看起来像一段乱码文本。这不是结构错了，只是 CSS 没生效。
快速调试建议：
- 临时加
style="border: 1px solid #000;"到table、th、td上看布局 - 用浏览器开发者工具检查元素，确认
tr和td是否被正确解析（而非被当成文本节点） - 避免依赖
border属性（已废弃），统一用 CSS 的border、border-collapse控制
border-collapse: collapse 能让相邻边框合并，比 separate 更干净，多数场景首选它。
响应式表格在小屏上容易溢出，overflow-x: auto 是最简兜底方案
纯 HTML 表格本身不响应式。当列数多或内容宽，在手机上会横向撑破容器。
不必立刻重构成卡片列表或 JS 动态重组，先试试这个最小改动：
- 给
table外层加一个div，设style="overflow-x: auto;" - 再给
table加style="min-width: 600px;"（按需调整）防止过窄压缩 - 避免对
td设固定width，优先用white-space: nowrap或text-overflow: ellipsis控制内容显示
复杂交互（如点击展开详情、列拖拽排序）需要 JS 支持，但基础表格展示，CSS 就够用。
真正容易被忽略的是语义完整性：缺少 caption、没用 scope 属性标记表头作用范围、th 没配 id + headers 关联数据单元格——这些不影响显示，却决定表格能否被无障碍设备正确读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
