HTML 表格生成器

可视化构建 HTML 表格并获取干净的代码输出

行数：

列数：

边框条纹悬停效果表头

标题：

编辑表格单元格

点击任意单元格编辑内容。表头单元格已高亮显示。

实时预览

HTML

CSS

手写 HTML 表格既枯燥又容错低：每一行都要重复同样的标签，漏掉一个闭合标签整个布局就散了。这个生成器给你一个可视化网格。设好尺寸，点单元格直接输入，切换几个样式开关，然后把干净的语义化 HTML5 和配套 CSS 复制到网站、博客或邮件模板里。编辑器、实时预览和代码输出都在同一个页面上，复制之前你能确切看到将粘贴出去的内容。

一步步搭建表格

设置行数和列数，然后点击更新尺寸。网格默认从 3 行 3 列开始。
点击任意单元格就地编辑。一个输入框会替换单元格文字；按回车保存，或按 Esc 放弃修改恢复原值。
切换边框、斑马纹、悬停和表头开关，还可以选择性填写 caption。每次改动都会立即重绘预览和代码。
用两个复制按钮分别取走 HTML 和 CSS，再粘贴到你的项目里。

一个生成示例

一个 2 列 2 行、带 caption、默认开关全部开启的表格会生成类似这样的标记：

<table class="handytools-table bordered striped hoverable">
  <caption>Pricing</caption>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$12</td>
    </tr>
  </tbody>
</table>

配套的 CSS 会在基础类上设置 width: 100% 和 border-collapse: collapse，为每个单元格加上纵向 8 像素、横向 12 像素的内边距并左对齐文本，然后按启用的选项附加规则。

样式选项详解

开关	加到 HTML 上的内容	加到 CSS 上的内容
边框	`bordered` 类	th 和 td 上 1px solid #ddd 边框
斑马纹	`striped` 类	`tbody tr:nth-child(even)` 的浅色背景
悬停	`hoverable` 类	`tbody tr:hover` 的背景变化
表头	含 th 单元格的 `thead`	th 底色与加粗字重

类名是累加的，所以关掉一个开关只是移除对应修饰类和规则。由于一切都共享一个基础类，之后再改风格只需要修改一条规则，而不必在一堆内联样式里翻找。表头选项稍微特殊：开启时第一行包进 thead、其余行包进 tbody，并输出 th 底色规则；关闭时所有行都留在 tbody，但第一行的单元格仍写成 th，因为网格就是这样存储的。如果你需要第一行是普通单元格，请在生成后手动修改复制出来的标记。

单元格内容的写法

单元格的值在输出时会被 HTML 转义，所以输入 <、>、&、" 或 ' 得到的是安全文本而非损坏的标记。这让工具很适合那些提到代码或运算符的对比表，比如「a < b」或「price & tax」。转义发生在生成的代码里，而不是屏幕上的编辑器里，所以网格显示你输入的原样，输出显示安全的等价形式。工具没有任何格式控制：单元格里不能加粗、斜体、链接或换行。需要更丰富的内容时，先生成骨架，再手工编辑复制出来的 HTML。

调整大小与边界情况

最重要的限制是调整大小具有破坏性：更新尺寸会重新调用建表逻辑，清空每一个单元格。除此之外网格相当朴素——没有合并或拆分，没有 rowspan 或 colspan，没有对齐控制，界面上也没有插入行或插入列按钮。行数上限 50、列数上限 20；输入超出范围的值会被钳制而不是报错。如果你需要网格无法表达的结构，先生成一个起点，再手工完善复制出来的标记。

输出用在哪些地方

博客和 CMS 内容：不碰代码就插入对比表或价格表。
文档和 README：快速产出风格一致的数据表。
邮件模板：搭好表格后，如果客户端会剥离 style 块，就把 CSS 内联进去。
快速原型：先勾勒布局，再保留或替换生成的 CSS。

邮件有一个注意点：:hover 和 nth-child 会被某些邮件客户端忽略，所以斑马纹和悬停效果可能无法保留，尽管标记本身合法。边框和表头底色使用的是普通属性，兼容性更可靠。

无障碍说明

生成的标记是一个合理的无障碍起点。表头单元格在 thead 内使用 th，让屏幕阅读器能把列标题与其下方的值关联起来；caption 元素为表格提供了辅助技术可以朗读的可访问名称。生成器没有添加的是表头单元格上的 scope 属性，也没有更长的表格用途摘要。对于大型或复杂的表格，请手动编辑复制出来的 HTML，为每个表头单元格加上 scope="col" 或 scope="row"。斑马纹能提升视力正常用户的阅读性，但不能替代对表头行的语义标记。caption 要写得简短且有描述性，因为它是屏幕阅读器朗读表格时最先听到的部分。

常见问题

修改行列数会保留我已经输入的文字吗？

不会。点击更新尺寸会从头重建整个网格，所有单元格清空，已经输入的内容都会被丢弃。如果之后还可能用到，请先把数据复制或粘贴到别处再调整大小。

怎么把第一行设成表头？

表头复选框默认开启。启用时第一行以 th 单元格写入 thead 元素，并套用表头样式。关掉它第一行会留在表体里，不过它的单元格在标记上仍然是 th。

能生成超过 20 列或 50 行的表格吗？

不能。输入被限制在最多 50 行、20 列，最少各为 1。超出范围的值会被静默调整到最近的边界。

为什么我只粘贴 HTML 时表格没有任何样式？

样式依赖生成的 CSS 来提供边框、斑马纹、悬停配色和表头底色。请两个面板都复制：HTML 放到表格该出现的位置，CSS 放进 style 块或样式表。

handytools-table 这个类是什么，可以改名吗？

它只是生成 CSS 所针对的基础类，bordered、striped、hoverable 作为修饰类附加其上。复制后可以改名，只要 HTML 和 CSS 保持一致——在两边同时搜索替换类名即可。

在单元格里输入 & 或尖括号会发生什么？

字符在生成的输出里会被转义：& 变成 &，< 变成 <，> 变成 >，引号同样会转义。你在预览里看到什么，浏览器就会把它当作什么文本渲染。

由 HandyTools Hub 团队审校 · 最后更新2026-09-11