不该用表格布局做用户反馈页，因为语义是展示结构化数据而非排版，强行使用会导致结构混乱、响应式失效、屏幕阅读器误读及后期维护困难。
表格布局做用户反馈页，不是不能用，而是不该用——<table> 的语义是“展示行列结构化数据”，不是“排版页面”。强行用它做反馈页，会导致结构混乱、响应式失效、屏幕阅读器误读，后期改个字段位置都得重调整整行 <code><tr>。
<h3>为什么 <code><table> 布局在反馈页上会出问题
<p>用户反馈页本质是表单（<code><form></form>）+ 说明文案 + 提交动作，不是数据报表。但很多人一看到“对齐”“分栏”就下意识套 <table>，结果：
<ul><li>表单控件（如 <code><input>、<textarea></textarea>）被塞进 <td> 后，<code>label 和控件的关联关系容易断裂，for/id 配对错位
<table> 默认不响应式，小屏下直接横向溢出，加 <code>width:100% 也救不回单元格内边距和换行逻辑
<tr> 里追加一行？还是塞进 <code><td> 底部？结构立刻变脆
<h3>
<code><form></form> + CSS Grid / Flexbox 才是正解
现代反馈页布局，应该用语义正确的 <form></form> 包裹字段，再用 CSS 控制排列。Grid 尤其适合多列对齐场景：
<form class="feedback-form">
<div class="field-group">
<label for="name">姓名</label>
<input type="text" id="name" name="name">
</div>
<div class="field-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
</div>
<div class="field-group">
<label for="message">反馈内容</label>
<textarea id="message" name="message"></textarea>
</div>
<button type="submit">提交</button>
</form>
CSS 只需几行就能实现两列对齐（桌面端）+ 单列堆叠（移动端）：
立即学习“前端免费学习笔记（深入）”；
.feedback-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.field-group { margin: 0; }
@media (max-width: 768px) {
.feedback-form { grid-template-columns: 1fr; }
}
如果真要用 <table>（比如 legacy 系统强制要求）
<p>那至少守住底线：只用 <code><table> 做字段对齐，<strong>不嵌套表单结构</strong>，且必须补全语义：
<ul><li>每组 <code><label></label>+<input> 放在一个 <td> 内，不要拆开
<li>用 <code><thead> 写标题行（如“请填写以下信息”），而非空 <code><tr>
<li>禁用 <code>border、cellpadding 等过时属性，全部交由 CSS 控制间距和边框
role="presentation" 明确告诉辅助技术：“这不是数据表，别当表格读”真正难的不是让字段看起来对齐，而是让它们在各种设备、各种交互方式（键盘 Tab、语音控制、放大镜）下都保持可用。表格布局省了十分钟 CSS，却可能埋下三天都调不好的可访问性坑。
