表格单元格的lang属性必须直接写在<td>或<th>上,<table>或<tr>上的lang无效;混排时主语言用外层td声明,外语术语用等语义化标签包裹;:lang()需精确匹配且不继承,推荐用td[lang^="zh"]。

表格单元格的 lang 属性必须直接写在 <td> 或 <th> 上,否则屏幕阅读器和浏览器完全不识别——给 <table> 或 <tr> 加 lang 是无效操作。
为什么 <table lang="en"> 没用
浏览器和屏幕阅读器(如 NVDA、VoiceOver)只检查每个 <td> 和 <th> 是否显式声明了 lang。父级标签没有语言语义,<table> 或 <tr> 上的 lang 值会被静默忽略。
-
<table lang="en"><td>API</td></table>→ “API” 仍被中文引擎读作“阿皮” -
<tr lang="ja"><td>東京</td></tr>→ 读屏软件无视lang="ja",按页面主语言处理 - 正确写法只有:
<td lang="ja">東京</td>或<th lang="en">Status</th>
<td> 里混排中英文时怎么设 lang
一个单元格内既有中文说明又有英文术语(如“调用 useState”),不能整个 <td> 统一设 lang="zh-CN"——这会让 useState 被中文引擎硬读成“优斯忒特”。
- 主语言用外层
<td lang="zh-CN">声明 - 外语术语用语义化元素包裹并单独设
lang,例如:<code lang="en">useState</code> - 避免用
<span>或<div>包裹,它们无语言语义;<code>、<abbr>、<cite>等是安全选择 - 数值、日期、单位(如
2026-09-21、USD)无需加lang,它们无自然语言发音规则
CSS 的 :lang() 在表格里为什么不生效
写了 td:lang(zh-Hans) { font-family: "PingFang SC"; } 却没效果?大概率卡在这两个点:
立即学习“前端免费学习笔记(深入)”;
-
:lang()是精确字符串匹配:如果单元格是<td lang="zh-CN">,那:lang(zh-Hans)就不会命中 - 嵌套元素不继承父级
lang的匹配逻辑:即使<td lang="zh-CN"><strong>行</strong></td>,strong:lang(zh-CN)也无效,因为<strong>自身没lang - 更稳妥的做法是用属性选择器前缀匹配:
td[lang^="zh"]覆盖zh-CN、zh-Hans、zh-Hant - 或者干脆把字体规则写在
td上,靠lang控制引号、断词等其他行为
最容易被忽略的是:表格里每个 <td> 或 <th> 的 lang 值,必须严格对应其实际文本的语言,而不是“看起来像英文就填 en”。日文汉字、韩文、法语词一旦标错,语音引擎就会降级或误读,且这种错误在视觉上完全不可见。



















