无障碍 HTML 表格生成器
HTML 表格生成器
无障碍 HTML 表格生成器：CSV 转 HTML 并添加标题 | We.Inc
粘贴 CSV，或从价目表、营业时间预设开始。生成带说明标题、表头单元格和 scope 属性的安全 HTML 表格，并附可复制的自适应 CSS。
粘贴电子表格或 CSV 中的行，也可以从服务价目表或营业时间预设开始。您会得到规范的 HTML 表格，包含说明标题、表头单元格和屏幕阅读器使用的 scope 属性，并附上一段适用于手机屏幕的简短 CSS。每个值都会经过转义，因此粘贴的文本不会破坏页面。所有操作都在浏览器中完成。您输入的内容不会发送给 We.Inc 或其他任何人；关闭标签页后，内容即会消失。
- 选择预设或粘贴自己的行。逗号、制表符（从电子表格复制）和分号都可以；包含逗号的引号值会保持在同一单元格中。
- 选择第一行是否为列标题，以及第一列是否为每行的标题。这些内容会生成带 scope 属性的 th 单元格。
- 填写说明标题。它会为屏幕阅读器用户命名表格，并显示在表格上方供所有人查看。
- 选择样式，并在桌面和手机宽度下预览。小屏幕上的宽表格会在自己的容器内横向滚动，而不会被挤压变形。
- 复制 HTML 和 CSS，或将两者作为一个文件下载。
- 仅将表格用于具有行列结构的数据，例如价格或营业时间。页面布局应使用 CSS。
- 表头尽量简短，因为屏幕阅读器每次播报时都会重复读出表头。
- 将单位写在标题中（例如“价格，美元”），不要在每个单元格中重复。
- 除非必要，否则不要合并单元格。屏幕阅读器用户难以理解合并后的单元格。
- 在手机宽度下检查表格。如果需要横向滑动超过一次，考虑拆分表格。
常见问题
无障碍 HTML 表格应具备什么？
需要说明表格用途的标题，用于列标题和行标题的 th 表头单元格，以及说明表头对应列还是行的 scope 属性。屏幕阅读器会据此说明每个值所属的标题。本生成器会添加以上三项。
为什么不使用 div 来制作表格？
一组 div 看起来可以像表格，但辅助技术无法判断每个单元格对应哪个标题。真正的 table 元素本身就包含这种语义。
如何处理自适应表格？
表格放在一个容器中，窄屏上可横向滚动。该容器可通过键盘聚焦，并以表格标题作为标签，因此键盘用户也能滚动。
我的数据会经过转义吗？
会。单元格中的 & 符号、尖括号和引号都会转换为 HTML 实体，因此包含 <script> 的单元格会显示为文本，而不会执行。
可以直接从 Excel 或 Google Sheets 粘贴吗？
可以。复制的单元格会以制表符分隔，工具会自动识别。
这个工具免费吗？
免费，无需注册。工具在浏览器中运行。
价目表和营业时间适合用表格展示
- 大多数小型企业网站至少有两类表格：服务价格和营业时间。这些都是真正的表格数据，应该用表格标记，并让每项价格对应相关服务、每个时间对应相应日期。
- 这里的预设提供了这两种表格结构。发布前请用自己的内容替换示例行；示例只是占位内容，并非真实价格。
免费开始 · 无需信用卡
Product
Who It's For
Features
Resources
Company
View Sitemap