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