可视化生成 HTML 表格 —— 加减行列 / 表头 / 对齐 / 边框 / 斑马纹 / 粘 CSV·TSV —— 复制干净代码, 浏览器本地
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
提示:从 Excel / Google Sheets 复制一段区域直接粘进单元格可批量填入;原始数据也可以用"导入 CSV / TSV"。
内联 style 粘进 Gmail / Notion / 大多数 CMS 编辑器都不丢样式。class 模式给真实网页更干净。
| Plan | Price | Seats |
|---|---|---|
| Free | $0 | 1 |
| Pro | $12/mo | 5 |
<table style="border-collapse:collapse;width:100%">
<thead>
<tr>
<th scope="col" style="border:1px solid #ccc;padding:8px;text-align:left;background:#f2f2f2">Plan</th>
<th scope="col" style="border:1px solid #ccc;padding:8px;text-align:right;background:#f2f2f2">Price</th>
<th scope="col" style="border:1px solid #ccc;padding:8px;text-align:center;background:#f2f2f2">Seats</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid #ccc;padding:8px">Free</td>
<td style="border:1px solid #ccc;padding:8px;text-align:right">$0</td>
<td style="border:1px solid #ccc;padding:8px;text-align:center">1</td>
</tr>
<tr>
<td style="border:1px solid #ccc;padding:8px">Pro</td>
<td style="border:1px solid #ccc;padding:8px;text-align:right">$12/mo</td>
<td style="border:1px solid #ccc;padding:8px;text-align:center">5</td>
</tr>
</tbody>
</table>这个工具能做什么
可视化生成真正的 HTML <table>, 复制出干净、好手改的代码。像电子表格 一样编辑单元格, 一键增删行列, 每列可设左 / 中 / 右对齐。表头放哪由你 决定 —— 首行、首列、首行加首列、或者不要 —— 工具会生成正确的 <th scope="col"> / <th scope="row">, 让读屏软件和搜索引擎正确理解 表格结构。可切换语义化的 <thead> / <tbody> 分段、边框、斑马条纹。 两种 CSS 形式: 每个单元格带内联 style=""(粘进 Gmail、Notion、 WordPress 以及大多数会剥掉外部样式表的 CMS 都不丢样式), 或者用一个 class 加一段 <style>(给真实网页更干净)。从 Excel / Google Sheets 复制一段区域直接粘进任意单元格即可批量填入, 原始数据也能粘进导入框。 每个单元格都做 HTML 转义, 数据里夹个 < 或 & 不会破坏输出、更不会注入 标签。实时预览展示浏览器真实渲染效果, 一键复制 HTML。100% 浏览器 本地 —— 表格数据不出标签页。
工具细节
- 输入
- 文件 + 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
HTML 表格生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把价格对比表放进营销邮件
邮件客户端是全网最苛刻的渲染环境 —— Gmail 和 Outlook 会把 <style> 块和外部 CSS 整个剥掉。在这里搭好你的三档价格表, CSS 形式保持"内联 style", 首行设为表头, 打开边框, 复制。每个 <td> 都带自己的 style="", 表格在收件人的邮箱里看起来一模一样, 再也 不会出现"我编辑器里好好的, 发出去变成没样式的一堆字"。
不碰代码就给 CMS 文章加一张规格表
你的 WordPress / Ghost / Contentful 编辑器有"自定义 HTML"块, 但没有表格工具。在这里打好行, 表头设为首列, 让左边的标签渲染 成 <th scope="row">, 复制内联样式的 HTML, 粘进自定义 HTML 块。 表格无障碍(scope 属性齐全)又自带样式, 不会被 CMS 样式表带歪, 也不会继承主题莫名其妙的边框。
把 Excel 区域转成干净的文档 HTML
电子表格里有一张 12 行的配置表, 要以真 HTML 放进文档。在 Excel 里复制区域, 直接粘到左上角单元格 —— Tab 分隔的数据一次填满网格。 CSS 形式切到"class + <style>"得到干净代码, 让文档站自己配主题, 设好表头行, 复制。以前手敲 <tr><td> 要十分钟, 现在两下点击。
接组件之前先把表格结构跑出来
在动手写 React/Vue 表格组件前, 你想先看清结构: 哪些格是表头、 边框放哪、斑马纹对可读性有没有帮助。在这里配合实时预览画一版, 切 thead/tbody 和条纹, 把生成的 HTML 当 JSX 的参照。scope 属性 和分段结构正是你手写时该有的样子, 照搬过去即可。
给文档无障碍检查做一张合规对比表
无障碍检查会标出用 <td> 当表头或缺 scope 的表格。在这里用首行 或首列表头重建被标问题的表格, 工具自动生成 <th scope="col"> / <th scope="row"> 以及 <thead> / <tbody> 分段。把修正后的代码贴 回去, 下一次 axe / Lighthouse 跑表头检查就过了, 你不用去背 ARIA 表格那套契约。
常见踩坑
给数据量大的页面用内联 style。内联 style="" 会在每个单元格重复同样的声明, 200 行的表会把 HTML 撑大。真实网页优先用 class + <style> 模式, CSS 只定义一次。内联模式是给会剥外部 CSS 的邮件 / CMS 用的。
表头单元格忘了 scope。用 <td> 当表头(或 <th> 没 scope)的表格过不了无障碍检查, 读屏软件读起来也乱。在这里选首行或首列表头, 工具会替你生成正确的 scope="col" / scope="row", 别事后手动删掉。
在单元格里粘 HTML 还指望它渲染。单元格内容是故意转义的, 所以 <b>bold</b> 会原样当文字显示。这是安全的默认行为 —— 真要在某一格放标记, 把生成的表格复制出去, 在你自己的编辑器里手改那一格。
隐私说明
网格编辑、HTML 序列化、CSV/TSV 解析、实时预览全部是浏览器标签页里 跑的纯 JavaScript。单元格内容不发到任何服务器, 不打点记录你输入了 什么。唯一要留意: 表格数据会编码进 URL 的 query string(?d=...), 这样"分享链接"能重新打开同一张表 —— 也意味着你把链接粘进 Slack 或邮件时, 对方服务器的访问日志会留下这份数据。公开表格无所谓, 但 涉密数据请手动复制 HTML, 别分享 URL。样式偏好(表头模式、边框、 条纹)只存在你本机的 localStorage 里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。