结论：表格必须用包裹，内用或填充单元格；漏闭合、错嵌套、混用/是渲染异常主因；是唯一合法直接子元素；表语义标题，表数据，影响可访问性与seo；rowspan/colspan需同步调整行内数量。
直接说结论：用 <table> 包裹行，<code><tr> 定义每行，<code><td> 填每个单元格——但实际写的时候，漏闭合、错嵌套、混用 <code><th> 和 <code><td> 是最常导致表格渲染异常的三个点。<h3>为什么 <code><table> 必须配 <code><tr> 才能显示内容<p>浏览器解析 HTML 时，<code><table> 是一个“容器型”元素，它不直接渲染内容；所有可视内容必须落在 <code><tr>（table row）里。如果你写成 <code><table><td>A</td></table>，多数浏览器会自动纠错补上 <tr>，但行为不可靠，尤其在严格模式或某些旧版 Safari 中可能完全不显示。<ul><li><code><tr> 是 <code><table> 的**唯一合法直接子元素**（<code><caption></caption>、<thead> 等除外）<li>一行里可以有多个 <code><td>，但不能把 <code><td> 直接塞进 <code><table><li>如果需要表头，优先用 <code><th> 而不是 <code><td>，语义更清晰，且默认加粗居中<h3><code><td> 和 <code><th> 到底该选哪个<p>别只看样式——<code><th> 表示“这个单元格是标题”，<code><td> 表示“这是普通数据”。屏幕阅读器、SEO、甚至 Excel 导出都依赖这个区别。<ul><li>第一行或第一列描述维度（如“姓名”“年龄”“城市”）→ 用 <code><th><li>表格左上角那个“空格”（行头与列头交汇处）通常也用 <code><th>，不是留空也不是 <code><td><li>不要为了省事全用 <code><td> 再用 CSS 加粗——这会让辅助技术误判结构<li>如果某列全是数字，但它是指标名称（如“GDP增长率”），仍是 <code><th>；如果是具体数值（如“6.2%”），才是 <code><td>
<h3>常见错误：合并单元格时 <code>rowspan 和 colspan 写反或漏减
rowspan="2" 表示“占两行”，但很多人忘了：被合并掉的那一行里，对应位置的 <td> 就不该再出现，否则会多出一列。<pre class="brush:php;toolbar:false;"></pre>
<table border="1">
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">数学</td>
<td>95</td>
</tr>
<tr>
<!-- 这里不能再写 <td>87</td>，否则数学列会变成三列 --><td>87</td>
</tr>
</table>
<ul><li>
<code>rowspan 后面的行中，对应列位置要跳过 <td><li>
<code>colspan="3" 意味着这一格顶替了原本连续的三个 <td>，所以本行后续 <code><td> 数量要少两个<li>用浏览器开发者工具检查元素，看是否意外多出 <code><td> 或错位，比肉眼数更容易发现问题<p>真正难的不是写出一个能显示的表格，而是让表格在不同缩放比例下对齐、被读屏软件准确朗读、导出到 CSV 时不崩格式——这些都取决于你从第一行 <code><tr> 开始有没有坚持语义和结构的一致性。</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
