表格内嵌表单控件可行，但仅限二维结构化数据编辑场景；因其语义是展示行列数据而非排列控件，滥用会导致可访问性差、响应式困难、键盘导航异常，现代开发应优先选用Flexbox或Grid布局。
表格内嵌表单控件可行，但仅推荐用于明确的二维结构化数据编辑场景（如后台配置表、批量参数录入），非通用布局方案。
为什么不能把 <table> 当作通用表单容器用
表格语义是「展示行/列对齐的数据」，不是「排列控件」。浏览器和屏幕阅读器会按数据表格逻辑解析，导致：表单标签（<label>）与输入框的关联关系被弱化；键盘导航顺序可能跳过预期路径；响应式时无法自然转为垂直流式布局，常需额外 overflow-x: auto 或 JS 重排。现代项目中，用 <table> 布局登录框、注册页这类线性流程表单，属于语义错用。
<td> 里放 <input> 的正确写法
若确需在表格中嵌入可编辑字段（例如「用户权限配置表」），关键不是能不能放，而是怎么放得可访问、可维护：
- 必须包裹在
<form>内，且每个<input>都要有name属性，否则提交时不会携带值 -
<th>单元格应设scope="col"或scope="row"，帮助屏幕阅读器理解行列关系 - 避免在
<td>中直接写裸<input type="text">，应配<label>并用for/id绑定（即使视觉上隐藏） - 不要依赖
cellpadding或cellspacing控制间距，改用 CSS 的padding和border-collapse: collapse
替代方案：Flexbox 和 Grid 更适合大多数表单布局
当目标是「让标签和输入框对齐」「多栏表单适配大屏」「按钮组右对齐」时，display: flex 或 display: grid 是更直接的选择：
立即学习“前端免费学习笔记（深入）”；
- 单列表单（移动端优先）：给
<form>设display: flex+flex-direction: column+gap: 0.75rem - 两栏标签-输入框：用
grid-template-columns: max-content 1fr，再配合grid-column: 1 / -1让提交按钮跨列 - 避免用
float或inline-block模拟对齐——它们对垂直居中、换行、间距控制都不可靠
容易忽略的可访问性细节
哪怕用了 <table>，只要没处理好以下三点，表单就可能对部分用户不可用：
-
<th>缺少scope属性，屏幕阅读器读不出「这列对应哪行数据」 -
<input>没有绑定<label>，仅靠视觉位置暗示关联（键盘 Tab 时无朗读提示） - 表格没有
<caption>或aria-label，导致辅助技术无法识别该表格用途（是只读数据？还是可编辑配置？）
表格嵌表单不是 bug，是特定场景下的 feature。但它的「适用边界」比多数人想的窄得多——真正需要它的时刻，往往是你已经画出带行列头的 Excel 式配置界面原型了。
