打开或粘贴 CSV 文件,即可得到一个 <table>:<thead> 中是 <th scope="col"> 表头,每行数据一个 <tr>;也可以生成能直接打开的完整 HTML 页面。所有值都经过 HTML 转义,所以数据中的 <script> 或 & 只会显示为文本,绝不会变成标记。文件在你的浏览器中转换,不会上传。
如何把 CSV 转换为 HTML
- 点击 打开文件,把
.csv、.tsv或.txt文件拖到工具上,或选择 粘贴。如果列看起来不对,请在 导入设置 中调整分隔符或编码。 - 在 输出 下,选择 仅表格,把代码粘贴到现有网页或 CMS 中;或选择 完整 HTML 页面,生成一个独立的文件。
- 填写 表格标题(可选),决定样式和换行方式,然后点击 复制 或 下载 HTML。
如果是用于 README 或 Wiki,Markdown 表格 通常更容易编辑;如果需要可打印的文件,请使用 CSV 转 PDF。
HTML 表格选项
| 仅表格 | 默认选项。只输出 <table> 元素,可直接粘贴到网页、邮件模板或 CMS 的 HTML 区块中。 |
|---|---|
| 完整 HTML 页面 | 加上 <!doctype html>、<html lang="en">(lang 的值随你所用的网站语言而定)、<meta charset="utf-8"> 和 <title>(使用表格标题,没有标题时为 Table),让文件在任何浏览器中都能正确打开。 |
| 表格标题(可选) | 写入一个 <caption> 作为表格的第一个子元素:这是屏幕阅读器朗读表格时使用的无障碍名称。 |
| 添加简单样式 | 默认开启。在完整页面中,会嵌入一小段样式表:边框、带底色的表头行以及右对齐的数字。选择 仅表格 时,则改为给表格加上 class="csv-table"、给数字单元格加上 class="num",外观由你自己的 CSS 决定。 |
| 显示单元格内的换行 | 默认开启。值内的换行会变成 <br>。关闭后,换行保留在源代码中,浏览器会把它显示为一个空格。 |
转义、文字方向和数字
- 在每个单元格、表头和表格标题中,
&、<、>、"和'都会写成&、<、>、"和'。数据中的标签会显示为文本,这也意味着 CSV 中原有的 HTML 不会被渲染。 - 每个单元格都带有
dir="auto",所以即使在从左到右的页面中,阿拉伯文或希伯来文的值也会从右到左显示。 - 只有当某列所有非空值都是普通数字时,该列才算数值列;
0042这样的 ID 列保持为文本,不会右对齐。值本身永远不会被重新格式化。 - 带引号的逗号、引号和换行按 RFC 4180 读取。空白表头会变成
Column 3,重复表头变成name (2)。 - 输出为 UTF-8 编码。完整页面会用
<meta charset="utf-8">声明编码;把 仅表格 的代码粘贴到其他网页时,那个网页也必须是 UTF-8 编码。
HTML 表格显示不正常时
- 源文件中的中文变成乱码,或重音字母显示为 é。 CSV 文件不是 UTF-8 编码。请在导入设置中选择它的编码(中文 Windows 版 Excel 保存的文件通常选 GB18030,旧版 Excel 的西文导出通常是 Windows-1252),然后重新打开。
- 数据中的标签显示成了文本。 单元格中的 HTML 是特意转义的,这样它就不能作为标记运行。如果你信任这些内容并希望渲染它们,请自行编辑结果。
- 粘贴后的表格没有边框。 仅表格(开启样式时)只添加 class 名称,不包含 CSS。请在网站的样式表中为
.csv-table和td.num设置样式,或选择 完整 HTML 页面 使用内置样式。 - 所有值都在同一列中。 分隔符识别错了;请在导入设置中设置正确的分隔符。
限制与隐私
25 MB、10 万行或 200 万个单元格以内的文件可实时预览前 200 行。更大的文件以流式方式转换:文件分块读取两遍(第一遍测量各列并判断哪些是数值列,第二遍写出),提示会说明下载内容包含整个文件,并且不提供 复制。单个输出文件最大 4 GB。
转换在当前标签页的后台线程中进行,所以页面保持流畅,点击 取消 即可停止。CSV 文件不会发送到任何服务器。
示例:一份含 HTML 特殊字符的订单列表
一份订单列表,包含 & 符号、撇号、引号,以及一条两行、带 HTML 的备注,使用默认设置转换(仅表格、带样式、显示换行)。qty 列全是数字,所以它的单元格带有 class="num"。
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>常见问题
把输出粘贴到我的网站上安全吗?
数据无法注入标记:每个值、表头和表格标题都经过 HTML 转义,而且任何值都不会被放进属性中。输出中仅有的标签,是转换器自己写出的表格元素。
完整页面中的 lang 属性是怎么定的?
完整页面的语言标签取自你正在使用的网站语言。如果数据是另一种语言,请在下载后修改 lang 属性。