legend 标签仅对 fieldset 有效，不能直接用于 table 添加标题；必须将 table 包裹在 fieldset 中，且 legend 必须是其第一个直接子元素，否则会被浏览器忽略或导致可访问性问题。
legend 标签不能直接用于 <table> 元素添加标题——它只对 <fieldset> 有效。想给表格加描述性标题，得先把它包进 <fieldset>，否则浏览器会忽略 <legend> 或渲染异常。
为什么 legend 单独套 table 不生效
浏览器只把 <legend> 当作 <fieldset> 的专属子元素解析。写成这样：
<legend>用户数据表</legend> <table>...</table>
或这样：
<table> <legend>用户数据表</legend> ... </table>
都会被忽略：前者是孤立标签，后者违反嵌套规则（<legend> 不是 <table> 的合法子元素）。
立即学习“前端免费学习笔记（深入）”；
fieldset 包裹 table 的正确写法
必须让 <legend> 成为 <fieldset> 的**第一个直接子元素**，<table> 紧跟其后：
<fieldset>
<legend>订单明细</legend>
<table>
<thead><tr><th>商品</th><th>数量</th></tr></thead>
<tbody><tr><td>笔记本</td><td>2</td></tr></tbody>
</table>
</fieldset>
-
<legend>不能被<div>、<p>或其他标签包裹 -
<legend>内容只能是纯文本或内联元素（如<strong>、<span>），不能放<input>或<button> - 如果表格本身已有语义标题（如
<caption>），<legend>是对整组的额外说明，不是替代
样式错位和可访问性风险
默认情况下 <legend> 会“切掉”<fieldset> 边框顶部，但套上 <table> 后容易出问题：
- 全局 CSS 重置了
fieldset的margin或padding，又没同步调legend的top偏移，导致文字悬空 - 把
<fieldset>放进display: flex容器，<legend>会被当作 flex item 拉伸，脱离原生定位 - 用
position: absolute移动<legend>时，忘了给<fieldset>加position: relative，导致参照错乱 - 屏幕阅读器依赖这个结构读出分组语义；如果 DOM 顺序错（比如
<p>插在<legend>前面），NVDA 或 VoiceOver 就会跳过整个分组
替代方案：什么时候不该用 legend + table
如果只是单纯展示数据表格，不需要表单交互或分组语义，优先用 <caption>：
<table> <caption>2026年Q2销售汇总</caption> ... </table>
只有当你明确需要：
– 把表格作为表单一部分（例如带复选框的行内编辑）
– 需要禁用整组（<fieldset disabled> 自动禁用内部所有 <input>）
– 要强化无障碍语义（读屏器把 <legend> 文本作为每行控件的隐式标签）
才值得套一层 <fieldset>。
最容易被忽略的是：删掉 <fieldset> 默认边框后，如果不补 outline 或背景色，键盘用户根本看不出哪块是“一组”，<legend> 再规范也白搭。
