必须用<table>实现功能对比表，因其语义明确、可访问性强；<thead>包列标题，<th scope="col">标功能项，<th scope="row">标产品名，其余用<td>；小屏用CSS重排+data-label保障语义。
功能对比表不是“画个格子填内容”那么简单，核心是让不同产品的同一功能项能被快速横向识别，同时保证屏幕阅读器、搜索引擎和后续维护者都能准确理解“谁支持什么”。用 <table> 是唯一稳妥选择，其他方案在语义、可访问性或响应式上都会掉链子。
为什么必须用 <table> 而不是 <div> 布局
浏览器和读屏器对 <table> 的解析逻辑是固化且一致的；<div> 模拟表格只会让结构变成“一串无关系的文字流”。尤其当用户靠键盘 Tab 导航或使用语音指令时，<div class="row"><div class="cell">✔️</div></div> 完全无法表达“这个对勾对应的是‘多语言支持’这一列、‘企业版’这一行”。
-
<thead>必须存在，且只包第一行（列标题），不能漏掉或用<div>替代 - 列标题用
<th scope="col">，比如<th scope="col">单点登录</th>；产品名（如“基础版”“旗舰版”）用<th scope="row"> - 所有功能支持状态（✔️/❌/⚠️/文字说明）一律用
<td>，别为了“看起来像标题”乱用<th>
<th> 和 <td> 到底怎么分才不翻车
关键看它在表格逻辑里“起不起定义作用”：如果这个单元格是用来告诉别人“这一列叫什么”或“这一行代表哪个产品”，就用 <th> 并加 scope；否则全是 <td>。常见错误是把“API 限频”“自定义域名”这些功能项写成 <th> —— 它们只是数据内容，不是表头。
- 首列产品名：
<th scope="row">专业版</th>（不是<td>） - 首行功能项：
<th scope="col">SSO 集成</th>（不是<td>） - 中间交叉格子：
<td>✅ 支持 SAML2.0</td>（哪怕内容带图标或链接） - 序号列（1, 2, 3…）或“操作”列（如“试用”按钮）都是数据，用
<td>
移动端窄屏下表格怎么不靠 overflow-x: auto 硬拖
直接给 <table> 加 overflow-x: auto 是无效的，因为表格本身不会触发滚动；套一层 <div class="table-container"> 虽能滑动，但用户得反复缩放+拖拽，关键信息常被切掉。真正可用的方案是 CSS 主导的结构重排。
立即学习“前端免费学习笔记（深入）”；
- 小屏（
max-width: 768px）下，用@media把每行<tr>设为display: block，再用td::before { content: attr(data-label); }补列名 - 给每个
<td>加data-label="多语言支持"属性，这样即使结构变卡片，语义仍保留 - 避免用
rowspan/colspan合并功能描述格——跨行合并会让小屏重排逻辑崩坏，改用单独一行写“功能说明”更可控
功能状态怎么标才不误导用户
一个 ❌ 不代表“完全不支持”，可能只是“需额外付费开通”；一个 ✔️ 也不代表“开箱即用”，可能依赖特定配置。HTML 表格不校验业务含义，但结构要为精确表达留出空间。
- 别把状态和说明塞进同一个
<td>，比如<td>❌（需联系销售）</td>；拆成两列：“支持状态” + “备注” - 统一用符号 + 简短文字：✅ 支持、⚠️ 有限支持、❌ 不支持、➖ 未提供，避免纯图标（无障碍不友好）
- 如有例外规则（如“仅限企业版 API 可调用”），放在“备注”列，不用
title属性藏起来——屏幕阅读器默认不读title
最易被忽略的一点：功能项顺序不是随便排的。把用户最关心、最常比较的核心功能（如权限管理、审计日志、SLA 保障）放在前面几列，次要功能（如界面主题色、邮件模板）往后放。这不光影响阅读效率，也直接影响 JS 动态筛选或后端导出时的数据优先级。
