HTML 表格生成器，免费

工作原理

1. 设置表格尺寸：输入行数和列数，生成初始网格。
2. 填入数据：点击单元格输入内容，添加表头行，启用边框和斑马纹。
3. 设置表格样式：选择边框样式、表头背景色、斑马纹行和单元格内边距。
4. 复制 HTML：生成的表格标记包含带 <th> 表头的 <thead>，以及正确的语义结构。

为什么使用 HTML 表格生成器？

手写 HTML 表格标记既繁琐又重复 · 尤其是行数众多或表头复杂的表格。每次都正确嵌套 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 容易出错。此生成器产出语义正确、无障碍友好的 HTML 表格，带有 scope 属性的表头单元格以兼容屏幕阅读器、对标题的正确支持，以及用于边框和悬浮状态的干净 CSS。可用于价格表、对比表、数据表和文档。

表格特性

• thead/tbody 结构 · 语义化表格标记，利于无障碍
• 斑马纹行 · 使用 CSS nth-child 实现交替颜色
• 边框样式 · 完整网格、仅水平或无边框
• 列合并 · 支持 colspan 和 rowspan
• 响应式包装 · 可选的移动端横向滚动包装器

什么是 HTML 表格生成器?

HTML 表格生成器给您一个可以像电子表格一样填写的可视化网格,然后用所有正确的语义元素发出等效的 <table> 标记。无需手动输入 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 并数开关标签,您设置维度、输入数据并复制结果。输出是经过验证的 HTML,并且能正确地向屏幕阅读器读取。

语义表格元素自 1993 年草案以来就存在于 HTML 中,并在 HTML 2.0(1995)中被正式确定。它们之所以存在,有一个原因:表格数据。定价表、比较矩阵、可排序的数据网格、元素周期表,任何行和列携带意义的事实矩形集合。在用于表格数据时,表格能正确地向辅助技术读取,而用于页面布局时则会造成可访问性噩梦(<div> 和 Flexbox 时代结束了这种滥用)。

此生成器输出可访问的标记,头单元上有 scope 属性,头行有单独的 <thead>,以及您勾选的视觉选项的内联 CSS。输出可以直接复制粘贴到博客文章、文档、电子邮件模板,以及任何接受 HTML 的上下文。可视化网格完全在您的浏览器中运行,因此没有数据离开您的设备。

生成器内部有什么

顶部控制行包含两个数字输入(行和列)、一个应用按钮和四个选项复选框(头行、条纹行、带边框、悬停效果)。先调整维度,点击应用,然后勾选符合您设计的选项。下面的可编辑网格立即更新,文本区域中生成的 HTML 反映您所做的每个更改。

可编辑网格是一个真实的 HTML 表格,每个单元中都有输入,所以您可以在单元之间切换、粘贴一列值或使用键盘导航。头行(勾选时)以彩色背景呈现,所以您可以一眼看出哪一行将成为输出中的 <th>。下面的输出框以等宽字体显示生成的 HTML,可以直接复制。

底部有三个操作按钮:复制 HTML 通过 Clipboard API 将标记写入您的剪贴板,切换预览在下方显示渲染版本以便您确认样式,清除单元格清空数据而不重置维度。预览使用与输出相同的 CSS,所以您看到的就是您的博客或文档将显示的内容。

历史和背景

Tim Berners-Lee 提议表格(1993)

第一个包含 <table> 的 HTML 草案是 Dave Raggett 在 1993 年底的 HTML 3.0 提案。该元素以 LaTeX tabular 环境和用于技术文档的 CALS 表格模型为蓝本。Mosaic 和早期 Netscape 在提议标记后就立即渲染表格,甚至在标准化之前,这就是为什么表格是 Web 上最早的视觉基元之一。

RFC 1942 标准化表格模型(1996)

Dave Raggett 的 RFC 1942(1996 年 5 月)为 HTML 表格提供了第一个正式规范,包括 thead、tbody、tfoot、colgroup 以及用于可访问性的 scope 属性。同年,W3C HTML 3.2 推荐基本上逐字采用了表格模型。该结构在三十年内基本保持不变。

布局表格的黑暗时代(1996 到 2005)

在 CSS 得到广泛支持之前,设计师使用表格定位页面元素:一个四单元表格包含页眉、左导航、内容和页脚。该技术有效但产生了难以阅读的标记,破坏了屏幕阅读器,使重新设计变得痛苦。Eric Meyer 的 CSS 福音传播(2000 至 2005)和 Jeffrey Zeldman 的《Designing With Web Standards》(2003)结束了这个时代,将表格恢复到其语义目的:表格数据。

CSS table-* display 值(2004 年起)

CSS 2.1 添加了 display: table、table-row 和 table-cell,所以您可以在非表格元素上获得类似表格的布局行为。这在 Flexbox 和 Grid 尚未得到支持的短暂时期(大约 2010 至 2015)是有用的。今天,display: grid 和 display: flex 已经取代了这些 CSS 表格值用于布局,真正的表格保留用于数据。

ARIA grid 角色和可访问性(2014)

WAI-ARIA 1.0(2014)为交互式表格引入了 role=grid,并阐明了屏幕阅读器应该如何通过 scope 属性和 headers/id 模式来宣布表格头。现代屏幕阅读器(NVDA、JAWS、VoiceOver)正确读取具有列和行上下文的正确标记的 <table>,这在基于 <div> 的网格中是不可能复制的。

响应式表格模式(2011 至今)

当 iPhone 使小屏幕占主导地位时,设计师必须弄清楚如何在窄视口上显示宽表格。Filament Group 2011 年关于响应式表格的文章引发了一波模式:水平滚动、移动设备上的堆叠行、按优先级折叠列。CSS 工作组一直在研究容器查询和子网格以使这些模式更容易;目前,标准方法是将表格包装在 overflow-x: auto 中。

实用工作流

SaaS 着陆页的定价表

三列(免费、专业、企业)乘以十行左右的功能。勾选头行使方案名称成为 <th> 单元,勾选带边框以获得清晰的分隔,如果您的设计有自己的行背景,则关闭条纹。复制 HTML,粘贴到您的 CMS 或静态站点,然后添加一个细的包装类用于主题。

博客评论的比较矩阵

当审查五种工具的八个标准时,带有条纹行和带边框单元格的表格比项目符号列表读起来更清晰。勾选条纹、带边框和头行;输入或粘贴数据;复制。语义标记使比较在源阅读器、归档服务和屏幕阅读器中可读。

API 文档中的参考表

API 文档通常以表格形式显示参数名、类型、默认值和描述。生成器为您提供四列与头行,您填写参数,复制 HTML 并粘贴到支持原始 HTML 的 Markdown 中,或粘贴到您的文档框架(Docusaurus、MkDocs、Hugo)中。scope 属性使列在屏幕阅读器中可导航。

电子邮件通讯(附注意事项)

电子邮件客户端(尤其是 Outlook 2007 至 2019)的 CSS 支持极为不一致,因此通讯 HTML 仍然使用表格进行布局(对没有布局表格规则的例外)。对于通讯内部的数据表,生成器的内联样式输出在大多数客户端中工作。在发送到大型列表之前在 Litmus 或 Email on Acid 中测试。

内部仪表板快速模拟

在原型设计内部管理仪表板时,带有条纹行的静态 HTML 表格看起来比占位符文本更接近最终产品。生成结构,粘贴到 React 或 Vue 组件中,稍后用数据绑定循环替换静态数据。

从 HTML 生成 PDF

在使用 Puppeteer、wkhtmltopdf 或 Chrome 的打印 PDF 等工具从 HTML 生成 PDF 时,表格在所有引擎中都能可靠渲染。使用生成器构建表格,粘贴到您的模板中,并运行 PDF 管道。带边框选项无需额外 CSS 即可提供清晰的打印线条。

常见陷阱

使用表格进行页面布局

表格用于表格数据,而不是页面结构。具有一行三列以定位页眉、内容和侧边栏的 <table> 会使页面对屏幕阅读器读取为数据表,这令人困惑。请改用 Flexbox 或 CSS Grid 进行布局。唯一的例外是 HTML 电子邮件,其中布局表格仍然对跨客户端渲染是必要的。

头单元上缺少 scope 属性

每个 <th> 都应该具有 scope="col" 或 scope="row",以便屏幕阅读器知道哪个标题适用于哪个数据单元。没有 scope,阅读器必须猜测,通常产生错误的上下文。这个生成器自动为头行发出 scope。如果您手动编辑 HTML,请保留 scope 属性。

没有 headers/id 的复杂(多级)标题

具有分组列标题的表格(Q1、Q2 各自分为 1 月、2 月、3 月)需要在每个数据单元上使用指向相关标题 id 的 headers 属性。仅靠 scope 对两级标题不足。生成器不产生复杂标题;对于这些,手动编辑 HTML 或使用支持该模式的 CMS 插件。

移动设备上的宽表格

六列表在 375 像素宽的手机屏幕上无法阅读。默认的移动友好模式是将表格包装在带有 overflow-x: auto 的 div 中,以便用户可以水平滚动。对于列数较多的表格,请考虑通过 @media (max-width) 在小屏幕上将行堆叠为迷你卡片。生成器的输出不会自动包装;在您的 CSS 中添加包装器。

没有明确内容的空单元格

空白的 <td></td> 对屏幕阅读器读取为空,这在列出 50 个条目时听起来很奇怪。如果一个单元格确实没有数据,请写 <td>&mdash;</td> 或 <td aria-label="没有数据">&ndash;</td>。请注意,破折号实体引入一个 em-dash,这是本站避免使用的;请使用连字符、「N/A」或「不可用」代替。

没有渐进增强的排序和过滤

静态 HTML 表格不能由用户排序或过滤。如果您的受众需要交互性,请加入 DataTables、AG Grid 或 Tanstack Table。生成器产生基础的语义表格,该表格成为这些库的基础。键盘导航和 ARIA 角色随库一起提供。

隐私和数据处理

一切都在您的浏览器中运行。可视化网格、HTML 输出和预览都存在于客户端 JavaScript 中。我们不会将您的数据发送到任何地方,不会记录输入,也不会在 cookie 或 localStorage 中存储任何内容。重新加载页面,之前的表格就消失了。

页面加载后,该工具可以离线工作。您可以从网络断开连接,构建包含客户数据、内部定价或任何其他机密内容的表格,而不会触及第三方服务器。复制 HTML 按钮使用需要用户手势的 Clipboard API,对外部各方不可观察。

什么时候不使用静态 HTML 表格

页面布局(使用 Flexbox 或 Grid)

如果您想要主内容旁边的侧边栏、卡片网格或导航栏,请使用 CSS Flexbox(display: flex)或 CSS Grid(display: grid)。用于布局的表格产生令人困惑的屏幕阅读器输出和不灵活的 HTML,它不能像现代布局基元那样适应视口变化。

大型数据集(超过 1000 行)

10,000 行静态 HTML 表格渲染缓慢并消耗大量内存。使用虚拟化网格库(TanStack Virtual、React Window、AG Grid),它只渲染可见行。静态 HTML 适合几百行以下。

交互式数据操作(使用网格库)

当用户需要排序、过滤、编辑、分组或分页时,您需要一个真正的网格库。AG Grid、TanStack Table、DataTables 和 Bootstrap Table 都在底层生成可访问的 <table> 标记,同时添加交互性。生成器的输出是起点,而不是终点。

图表和图形(使用 SVG 或 canvas)

条形图不是表格,而是可视化。使用 Chart.js、D3、Recharts 或任何基于 SVG 的图表库。如果您需要图表和支持的数据表以提高可访问性,请渲染图表并将带有相同数据的 <table> 放在附近(或隐藏在视觉上隐藏的类中),以便屏幕阅读器用户获取数字。

更多问题

我应该始终使用 thead 和 tbody 吗?

对于带头行的表格,是的。<thead> 将头行与数据行分开,这让浏览器在长表格上冻结头,并让屏幕阅读器正确宣布头。勾选头行选项时,生成器自动包含 thead。对于没有头的表格,您可以省略两者,但包含 <tbody> 以获得完整性是很便宜的。

我何时使用 scope="col" vs scope="row"?

scope="col" 用于标记列的 <th> 单元(头行的顶行)。scope="row" 用于标记行的 <th> 单元(当每行都有名称时最左侧的单元)。大多数表格只有列头,所以 scope="col" 是常见情况。如果两者都有,请用适当的 scope 标记每个。

我如何制作可排序表格?

使用一个 JavaScript 库,该库为现有 <table> 标记添加点击排序。Sortable.js、TanStack Table 和 DataTables 都这样做。纯 CSS 无法排序。生成器的输出是静态基础;在您的最终项目中将库分层叠加。为了可访问性,该库应将 aria-sort 添加到活动列。

最好的响应式模式是什么?

最简单和最易访问的是在包装 div 上使用 overflow-x: auto,它保留了表格的语义,同时让用户可以水平滚动。对于列数较多的表格,堆叠行模式(在窄宽度的 tds 上 display: block,通过 data-label 属性使用数据标签)在移动设备上将每行读为带标签的列表。两者都是有效的;根据表格的阅读-比较使用情况选择。

我可以在 Markdown 中使用 HTML 表格吗?

大多数 Markdown 处理器(GitHub Flavored Markdown、Pandoc、MDX、MkDocs、Hugo)都接受 Markdown 语法旁边的原始 HTML,因此您可以直接粘贴生成器的输出。Markdown 的原生表格语法更简单,但缺少 colspan、rowspan、scope 和样式,因此对于超出简单网格的任何内容,HTML 更好。注意:某些严格的 Markdown 解析器(没有扩展的 CommonMark)默认忽略 HTML。

我如何在没有 CSS 的情况下样式化交替行颜色?

在生成器中勾选条纹行选项。输出在每一行上包含内联样式属性,因此即使在剥离 CSS 的上下文中(某些网络邮件客户端),条纹也能存活。如果您的环境允许外部 CSS,请优先在样式表中使用 tr:nth-child(even),这比内联样式更干净,更易于更新。