最简可用html表格必须包含、、三层嵌套，缺一不可；漏掉会导致被浏览器丢弃或移出，页面显示为空白，因合法直接子元素仅限、、、、和。
最简可用的 HTML 表格必须包含 <table>、<code><tr>、<code><td> 三层嵌套，缺一不可；漏掉 <code><tr> 是新手最常踩的坑——浏览器会直接忽略所有 <code><td>，页面显示为空白。
<h3>为什么<tr>不能省略？
<p>浏览器解析时，<code><table> 的合法直接子元素只有 <code><caption></caption>、<colgroup></colgroup>、<thead>、<code><tbody>、<code><tfoot> 和 <code><tr>。如果你写成 <code><table>
<td>A</td>
<td>B</td>
</table>，<td> 会被丢弃或移到 table 外，DOM 中根本看不到。
<ul><li>验证方法：打开开发者工具，检查 <code><table> 下是否有 <code><tr> 节点
<li><code><thead> 和 <code><tbody> 可省略，浏览器会自动补全，但 <code><tr> 不行
<li>每行 <code><td> 数量最好保持一致，否则可能触发“幽灵单元格”错位
<h3>用<th>还是</th>
<td>写表头？
<p>语义和可访问性上，表头必须用 <code><th>，而不是把 <code><td> 加粗应付。屏幕阅读器靠 <code><th> 自动关联行列数据，<code><td> 没这个能力。
<ul><li><code><th> 默认加粗+居中，视觉上更明确区分表头与数据
<li>复杂表格中，给 <code><th> 加 <code>scope="col" 或 scope="row"，能提升读屏体验
<td style="font-weight:bold">），这无法被辅助技术识别
<h3>边框怎么加才不翻车？</h3>
<p>原生 <code><table border="1"> 是过时写法，现代方案必须用 CSS 控制边框，关键在 <code>border-collapse。
- 默认是
border-collapse: separate，两行之间有空隙，border-spacing才生效（仅支持 px 单位） - 设
border-collapse: collapse后，<th> 和 <code><td> 的边框才会真正合并成单线 <li><code><table> 自身的 border 不会自动和第一行/最后一行合并，需额外给 <code><table> 加 border <li>避免对 <code><td> 设固定 <code>width，内容长度波动大时容易截断或撑破布局小屏下表格横向溢出怎么办？
原生
<table> 不响应式，<code>width: 100%对它基本无效，因为<td> 优先按内容宽度伸展。 <ul><li>最稳妥方式：用 <code><div style="overflow-x: auto;"> 包一层 <code><table><li>不要给 <code><table> 设 <code>min-width，否则小屏仍会溢出 - 如需隐藏非关键列，用
display: none（比visibility: hidden安全，后者仍参与表格计算） - 慎用
colspan/rowspan强行“撑开”缺失的<tr>——结构错乱后 JS 遍历和 CSS 定位都会出问题 <p>表格结构看似简单，但真正卡住人的往往不是语法，而是浏览器对缺失 <code><tr> 的静默处理、<code>border-collapse的合并逻辑、以及小屏下内容宽度与容器宽度的冲突。这些地方不细看 DOM 或调试样式，很容易反复试错。
