不该用于双栏布局，因其语义错误、响应式失效、可访问性归零；应改用CSS Grid或Flexbox实现语义正确、响应友好的现代布局。
双栏布局用表格搭建，不是不能做，而是不该做——语义错误、响应式崩坏、可访问性归零，现代页面里它早该退休了。
为什么 <table> 不该用来做双栏布局
<p>HTML 表格元素的唯一合法用途是展示二维数据（如成绩单、价格对比表）。用 <code><table> 套 <code><tr> 和 <code><td> 拼左右栏，浏览器能渲染出来，但实际埋下三类硬伤：
<ul>
<li>屏幕阅读器会把整页当“数据表”朗读，左栏导航被读成“第1行第1列”，用户完全无法理解结构</li>
<li>在手机上，<code><table> 默认不换行，要么横向滚动，要么内容挤压变形，<code>table-layout: fixed 也救不回来
<table> 需要 hack（比如 <code>height: 100% + 父容器 display: table），维护成本翻倍
如果必须用表格标签，怎么最小化伤害
极少数遗留系统或邮件模板中真绕不开 <table>，那就只用它干一件事：让两列内容并排且宽度可控。其他所有样式和行为，交给内联 CSS 封装：
<ul><li>删掉所有 <code><thead>、<code><tbody>、<code><caption></caption> —— 它们暗示语义，而你没数据
<table style="width: 100%; border-collapse: collapse;"> 控制基础尺寸，禁用默认边框间距
<li>两栏用 <code><td>，别用 <code><th>（<code><th> 暗示表头，会触发辅助技术错误识别）
<li>给每栏 <code><td> 加 <code>style="vertical-align: top;"，避免内容高度不一时错位
示例片段：
立即学习“前端免费学习笔记（深入）”；
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 30%; vertical-align: top;">左侧导航</td>
<td style="width: 70%; vertical-align: top;">主内容区</td>
</tr>
</table>
真正该用什么替代 <table> 实现双栏
<p>用语义正确、响应式友好的现代方案，代码更少，适配更稳：</p>
<ul>
<li>纯 CSS Grid：父容器加 <code>display: grid; grid-template-columns: 30% 70%;，两栏自动对齐，grid-gap 控制间距
display: flex;，子元素设 flex: 0 0 30% 和 flex: 0 0 70%，加 min-width: 0 防文字溢出@media (max-width: 768px) { grid-template-columns: 1fr; }，一栏变通栏注意：别用 float 或 inline-block —— 清除浮动麻烦，vertical-align 对齐不可靠，且同样无响应能力。
检查是否误用表格布局的三个信号
打开开发者工具，快速扫一眼 DOM 结构，出现以下任一情况，就是危险信号：
<table> 里嵌套了 <code><div> 或 <code><p></p>作为主要内容容器（说明你在用表格“撑位置”，而非展示数据）<td> 的 <code>colspan或rowspan值大于 1，但表格没有真实行列逻辑（比如用colspan="2"做页脚横条）- CSS 中大量出现
table { display: block; }或td { display: inline-block; }（这是在强行扭曲表格本意）
表格不是布局工具，这点从 HTML5 规范到 WCAG 2.1 都写得明明白白。哪怕只改一个页面，把 <table> 换成 <code><div class="layout-grid">，可访问性和后续维护成本就立刻不同。</div>
