结论：表格必须用<table>包裹<tr>，<tr>内用<td>或<th>填充单元格；漏闭合、错嵌套、混用<th>/<td>是渲染异常主因；<tr>是<table>唯一合法直接子元素；<th>表语义标题，<td>表数据，影响可访问性与SEO；rowspan/colspan需同步调整行内<td>数量。
直接说结论：用 <table> 包裹行，<tr> 定义每行，<td> 填每个单元格——但实际写的时候，漏闭合、错嵌套、混用 <th> 和 <td> 是最常导致表格渲染异常的三个点。
为什么 <table> 必须配 <tr> 才能显示内容
浏览器解析 HTML 时，<table> 是一个“容器型”元素，它不直接渲染内容；所有可视内容必须落在 <tr>（table row）里。如果你写成 <table><td>A</td></table>，多数浏览器会自动纠错补上 <tr>，但行为不可靠，尤其在严格模式或某些旧版 Safari 中可能完全不显示。
-
<tr>是<table>的**唯一合法直接子元素**（<caption>、<thead>等除外） - 一行里可以有多个
<td>，但不能把<td>直接塞进<table> - 如果需要表头，优先用
<th>而不是<td>，语义更清晰，且默认加粗居中
<td> 和 <th> 到底该选哪个
别只看样式——<th> 表示“这个单元格是标题”，<td> 表示“这是普通数据”。屏幕阅读器、SEO、甚至 Excel 导出都依赖这个区别。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 第一行或第一列描述维度（如“姓名”“年龄”“城市”）→ 用
<th> - 表格左上角那个“空格”（行头与列头交汇处）通常也用
<th>，不是留空也不是<td> - 不要为了省事全用
<td>再用 CSS 加粗——这会让辅助技术误判结构 - 如果某列全是数字，但它是指标名称（如“GDP增长率”），仍是
<th>；如果是具体数值（如“6.2%”），才是<td>
常见错误：合并单元格时 rowspan 和 colspan 写反或漏减
rowspan="2" 表示“占两行”，但很多人忘了：被合并掉的那一行里，对应位置的 <td> 就不该再出现，否则会多出一列。
立即学习“前端免费学习笔记（深入）”；
<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>-
rowspan后面的行中，对应列位置要跳过<td> -
colspan="3"意味着这一格顶替了原本连续的三个<td>，所以本行后续<td>数量要少两个 - 用浏览器开发者工具检查元素，看是否意外多出
<td>或错位，比肉眼数更容易发现问题
真正难的不是写出一个能显示的表格，而是让表格在不同缩放比例下对齐、被读屏软件准确朗读、导出到 CSV 时不崩格式——这些都取决于你从第一行 <tr> 开始有没有坚持语义和结构的一致性。
