ToolConvoyToolConvoyv2.6
DEV

CSV 转 HTML — 把 CSV 数据转为 HTML 表格标记

把 CSV 数据转换为格式化的 HTML 表格标记。可选 thead、tbody 与 CSS 类，全部在浏览器中运行。无上传、无限制。

● 本地运行 · 在您的标签页中生成页面加载以来工具发出的网络请求：0 次

CSV to HTML Table

Convert CSV data to a formatted HTML table. Generates clean <table> markup with <thead> and <tbody>. Works entirely in your browser.

您可能还需要

排序行MD5 哈希UUID 生成器JSON 转 CSVBase64 编码PDF 拆分HAR 转 cURLTOML 工具.env 助手MsgPack 检查器PDF 压缩PDF 转 EPUB
打开转换器

CSV 转 HTML 是那种看起来像模板语言的活儿、最后还得靠工具来干的转换。原因是真正的 CSV-to-HTML 转换要处理三件朴素字符串拼接搞不定的事:HTML 转义(让单元格里的 <script> 不会炸掉页面)、分隔符检测(让分号分隔的欧洲导出文件不用手动配置就能用)、表头行识别(让第一行变成 <th> 单元格,既利于可访问性也方便样式,而不是混在数据行里)。一段 10 行的脚本把每个单元格包进 <td> 可以撑到输入里出现引号、小于号或非逗号分隔符,然后脚本就变成了 bug 报告。

生成 HTML 表格里「不那么显然」的一件事是可访问性。这里的默认输出是语义化的——<thead> 和 <tbody> 把表头和数据分开,<th scope=\"col\"> 把每个表头单元格标注成列表头,caption 渲染成真正的 <caption> 元素,屏幕阅读器会播报。这些都不是让表格渲染出来所必需的,但这正是「对所有人都能用」和「只对看得见的人能用」表格之间的差距。屏幕阅读器靠 <th> 和 scope 属性在朗读每个单元格时播报列名,这正是数据表格在非视觉场景下能导航的原因。

最后的交接:如果 HTML 要进静态站点(博客文章、文档页、GitHub README),直接复制输出即可。如果目标是已经有表格组件的 CMS,Markdown 版本通常更合适——大多数静态站点生成器会自动把 Markdown 表格转为带正确 <thead> 的 HTML。如果目的地是已经加载了表格库(DataTables、AG Grid)的 Web 应用,生成无样式的 HTML 再交给表格库;不要双重样式。

广告

使用方法

  1. 粘贴 CSV 数据

    把 CSV 拖入输入框,或加载 .csv 文件。工具会自动检测分隔符(逗号、分号、Tab)以及是否存在 UTF-8 BOM——两者在实际导出中都十分常见。

  2. 选择 HTML 结构

    可选最小化表格(只有 `<table><tr><td>`)、语义化表格(带 `<thead>` 和 `<tbody>`),或带样式的表格(带 Bootstrap 兼容的类)。切换时预览会实时更新。

  3. 复制或下载 HTML

    把 HTML 复制到剪贴板,或下载为 .html 文件。输出是单一自包含的表格——不带外部 CSS、不带 JavaScript、不引用图片。粘到任意 HTML 文档里即可使用。

常见问题

输出包含 CSS 样式吗?

默认不包含——输出是纯语义 HTML,没有内联样式。打开「带样式的表格」选项可以加上 Bootstrap 兼容的类(`<table class="table">`、`<thead class="table-light">`),在 Bootstrap 项目里可以直接用。

第一行会被当作表头吗?

特殊字符会被转义吗?

会的——单元格里的 `<`、`>`、`&` 和引号都会被 HTML 转义。粘贴一段单元格里有 `<script>` 的 CSV,输出里就会变成 `&lt;script&gt;`,放进任意 HTML 页面都是安全的。

能加 caption 或表格 ID 吗?

两个都是输入框下方的可选字段。caption 渲染为 `<caption>`(语义化的,对可访问性友好),ID 渲染为 `<table id="...">`(便于 CSS 定位或 JavaScript 钩子)。

空单元格如何渲染?

空单元格默认渲染为 `<td></td>`,大多数浏览器下显示为空白。打开「空单元格使用 nbsp」选项,会改为渲染 `<td>&nbsp;</td>`,在带边框的表格里可以保留行高。

限制说明

  • 不支持 colspan 或 rowspanCSV 是平面网格——无法表达合并单元格。如果源数据里有合并表头,输出会逐格独立渲染,你需要手动编辑 HTML 来添加 `colspan` 或 `rowspan`。
  • 不支持嵌套表格单元格值里的换行在 HTML 里仍然是单行,不会变成嵌套元素。遇到复杂的单元格内容,先后期处理输出,按换行拆分后再用 `<br>` 或 `<p>` 包起来。
  • 只支持 Bootstrap 类「带样式的表格」选项输出的是 Bootstrap 5 类名。如果用 Tailwind、Material UI 或其他框架,先生成无样式表格,再在你自己的模板里套上对应框架的类。

平台说明

macOS
Numbers 和 Excel 在 macOS 上默认都导出 UTF-8 的 CSV。旧版 Mac 版 Excel 仍可能输出 MacRoman——如果在渲染的 HTML 里看到 é 而不是 é 这种乱码,重新另存为 UTF-8 即可。
Windows
Windows 版 Excel 在部分区域默认输出 ANSI 或 UTF-16。在导出下拉里选择「CSV UTF-8 (逗号分隔)」,永远不要选「CSV (逗号分隔)」,可以避免 HTML 输出里的编码问题。
Linux
绝大多数 Linux 工具(cut、awk、miller)默认输出 UTF-8。如果管道上游是 Windows 来源的文件,先跑 `iconv -f cp1252 -t utf8 input.csv > output.csv`,可以让 HTML 输出保持干净。
Web
完全在客户端运行。页面加载完成后可以离线使用。HTML 输出是可移植的——粘到任意 HTML 文档、博客文章或静态站点生成器里都不需要额外依赖。
广告
广告