table标签适合语义化三行两列数据表格，结构为table→3个tr→每tr含2个td；合并单元格需删减对应td防错位；非数据场景宜用display:table模拟。
table 不是布局工具，但如果你确实需要快速实现一个语义清晰、结构稳定的三行两列「数据表格」，用原生 table 标签是最直接且兼容性最强的方式。别被“不能用 table 做布局”的说法吓住——它错在滥用，不在结构本身。
怎么写一个标准的三行两列 table
核心就是三层嵌套：table → tr × 3 → 每个 tr 内两个 td
不需要额外属性也能渲染成功，但建议加 border 或 CSS 边框辅助调试：
示例代码：
| 第1行第1列 | 第1行第2列 |
| 第2行第1列 | 第2行第2列 |
| 第3行第1列 | 第3行第2列 |
- 每对
<tr></tr>就是一行，共写三次 - 每个
<tr> 里必须有且仅有两个 <code><td>（或两个 <code><th>），否则列数会错乱<li>不要在 <code><tr> 外面直接写 <code><td>，浏览器会自动纠错但行为不可控<li> <code>border="1"是 HTML 属性，仅用于快速验证结构；正式项目请用 CSS 的border控制
用 colspan 或 rowspan 合并单元格时容易崩
常见错误是合并后没删掉被覆盖的单元格，导致列总数失衡。比如想让第一行两个单元格合并成一个：
✅ 正确写法（删掉第二个 td）：
<tr> <td colspan="2">合并后的标题</td> </tr>
❌ 错误写法（留着第二个 td）：
<tr> <td colspan="2">合并后的标题</td> <td>多余单元格</td> <!-- 这会导致第二列整体右移 --> </tr>
-
colspan="2"表示“占两列宽度”，该td就替代了原本两个位置 - 合并后整行实际单元格数量 = 原列数 − (colspan − 1)，务必手动核对
- 跨行（
rowspan）同理：跨两行就少写一行里的对应td，否则下一行会错位
CSS 替代方案：用 display: table 模拟三行两列
如果场景是「视觉上三行两列，但内容不是表格数据」（比如卡片式信息块），更适合用语义化标签 + CSS 模拟表格行为：
关键样式：
.grid-table { display: table; width: 100%; }
.grid-row { display: table-row; }
.grid-cell { display: table-cell; width: 50%; }
HTML 结构（用 div 代替 table）：
<div class="grid-table">
<div class="grid-row">
<div class="grid-cell">左上</div>
<div class="grid-cell">右上</div>
</div>
<div class="grid-row">
<div class="grid-cell">左中</div>
<div class="grid-cell">右中</div>
</div>
<div class="grid-row">
<div class="grid-cell">左下</div>
<div class="grid-cell">右下</div>
</div>
</div>
- 这种写法保留了表格的对齐和等高特性，又不违背语义（没有用
table标签装非数据内容） - 注意
display: table-cell的元素默认 vertical-align: middle，如需顶部对齐要显式设vertical-align: top - Flex/Grid 更现代，但若需 IE10+ 兼容或严格等高，
display: table仍是稳妥选择
三行两列本身很简单，真正容易出问题的是合并单元格后的列数校验、以及把 table 当布局容器用时对语义和可访问性的忽视。写完记得用浏览器开发者工具检查 tr 下的 td 数量是否恒为 2。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
