跳到工具
ViewCSV
无需上传文件

CSV 转 HTML 表格

orders.csv· 示例数据15 行 · 8 列
输出
添加边框并让数字右对齐;选择“仅表格”时改为添加 class 名称。
<table class="csv-table">
  <thead>
    <tr>
      <th scope="col">order_id</th>
      <th scope="col">customer</th>
      <th scope="col">city</th>
      <th scope="col">product</th>
      <th scope="col">quantity</th>
      <th scope="col">unit_price</th>
      <th scope="col">order_date</th>
      <th scope="col">status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td dir="auto">001041</td>
      <td dir="auto">磊 黄</td>
      <td dir="auto">北京</td>
      <td dir="auto">Coffee beans 1kg</td>
      <td class="num" dir="auto">7</td>
      <td class="num" dir="auto">139.12</td>
      <td dir="auto">2026-01-27</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001042</td>
      <td dir="auto">杰 徐</td>
      <td dir="auto">北京</td>
      <td dir="auto">Coffee beans 1kg</td>
      <td class="num" dir="auto">2</td>
      <td class="num" dir="auto">132.10</td>
      <td dir="auto">2026-02-14</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001043</td>
      <td dir="auto">伟 孙</td>
      <td dir="auto">上海</td>
      <td dir="auto">Notebook A5</td>
      <td class="num" dir="auto">7</td>
      <td class="num" dir="auto">129.75</td>
      <td dir="auto">2026-03-22</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001044</td>
      <td dir="auto">敏 杨</td>
      <td dir="auto">上海</td>
      <td dir="auto">Chair, ergonomic</td>
      <td class="num" dir="auto">1</td>
      <td class="num" dir="auto">122.25</td>
      <td dir="auto">2026-04-25</td>
      <td dir="auto">paid</td>
    </tr>
    <tr>
      <td dir="auto">001045</td>
      <td dir="auto">静 王</td>
      <td dir="auto">成都</td>
      <td dir="auto">Coffee beans 1kg</td>
      <td class="num" dir="auto">9</td>
      <td class="num" dir="auto"></td>
      <td dir="auto">2026-05-15</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001046</td>
      <td dir="auto">伟 黄</td>
      <td dir="auto">北京</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">8</td>
      <td class="num" dir="auto">104.23</td>
      <td dir="auto">2026-06-06</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001047</td>
      <td dir="auto"> 伟 吴 </td>
      <td dir="auto">成都</td>
      <td dir="auto">USB-C cable</td>
      <td class="num" dir="auto">5</td>
      <td class="num" dir="auto">225.65</td>
      <td dir="auto">2026-07-08</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001048</td>
      <td dir="auto">杰 李</td>
      <td dir="auto">南京</td>
      <td dir="auto">Coffee beans 1kg</td>
      <td class="num" dir="auto">7</td>
      <td class="num" dir="auto">74.98</td>
      <td dir="auto">2026-08-11</td>
      <td dir="auto">refunded</td>
    </tr>
    <tr>
      <td dir="auto">001049</td>
      <td dir="auto">磊 王</td>
      <td dir="auto">南京</td>
      <td dir="auto">Monitor 27&quot;</td>
      <td class="num" dir="auto">9</td>
      <td class="num" dir="auto">223.84</td>
      <td dir="auto">2026-09-22</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001050</td>
      <td dir="auto">艳 吴</td>
      <td dir="auto">南京</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">3</td>
      <td class="num" dir="auto">91.94</td>
      <td dir="auto">2026-01-02</td>
      <td dir="auto">shipped</td>
    </tr>
    <tr>
      <td dir="auto">001051</td>
      <td dir="auto">娜 刘</td>
      <td dir="auto">深圳</td>
      <td dir="auto">Monitor 27&quot;</td>
      <td class="num" dir="auto">2</td>
      <td class="num" dir="auto">216.98</td>
      <td dir="auto">2026-02-18</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001052</td>
      <td dir="auto">磊 刘</td>
      <td dir="auto">上海</td>
      <td dir="auto">Chair, ergonomic</td>
      <td class="num" dir="auto">8</td>
      <td class="num" dir="auto">136.30</td>
      <td dir="auto">2026-03-22</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001053</td>
      <td dir="auto">静 张</td>
      <td dir="auto">北京</td>
      <td dir="auto">Desk lamp</td>
      <td class="num" dir="auto">4</td>
      <td class="num" dir="auto">238.82</td>
      <td dir="auto">2026-04-25</td>
      <td dir="auto">pending</td>
    </tr>
    <tr>
      <td dir="auto">001054</td>
      <td dir="auto">艳 陈</td>
      <td dir="auto">南京</td>
      <td dir="auto">USB-C cable</td>
      <td class="num" dir="auto">4</td>
      <td class="num" dir="auto">95.92</td>
      <td dir="auto">2026-05-21</td>
      <td dir="auto">paid</td>
    </tr>
    <tr>
      <td dir="auto">001043</td>
      <td dir="auto">伟 孙</td>
      <td dir="auto">上海</td>
      <td dir="auto">Notebook A5</td>
      <td class="num" dir="auto">7</td>
      <td class="num" dir="auto">129.75</td>
      <td dir="auto">2026-03-22</td>
      <td dir="auto">pending</td>
    </tr>
  </tbody>
</table>

15 行 · 1 个文件

打开或粘贴 CSV 文件,即可得到一个 <table>:<thead> 中是 <th scope="col"> 表头,每行数据一个 <tr>;也可以生成能直接打开的完整 HTML 页面。所有值都经过 HTML 转义,所以数据中的 <script> 或 & 只会显示为文本,绝不会变成标记。文件在你的浏览器中转换,不会上传。

如何把 CSV 转换为 HTML

  1. 点击 打开文件,把 .csv、.tsv 或 .txt 文件拖到工具上,或选择 粘贴。如果列看起来不对,请在 导入设置 中调整分隔符或编码。
  2. 在 输出 下,选择 仅表格,把代码粘贴到现有网页或 CMS 中;或选择 完整 HTML 页面,生成一个独立的文件。
  3. 填写 表格标题(可选),决定样式和换行方式,然后点击 复制 或 下载 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>。关闭后,换行保留在源代码中,浏览器会把它显示为一个空格。

转义、文字方向和数字

  • 在每个单元格、表头和表格标题中,&、<、>、" 和 ' 都会写成 &amp;、&lt;、&gt;、&quot; 和 &#39;。数据中的标签会显示为文本,这也意味着 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"。

CSV
id,product,qty,comment
0042,Fish & Chips,2,"<b>Extra</b> vinegar
no salt"
0043,"O'Brien's ""Stout""",12,
HTML
<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 &amp; Chips</td>
      <td class="num" dir="auto">2</td>
      <td dir="auto">&lt;b&gt;Extra&lt;/b&gt; vinegar<br>no salt</td>
    </tr>
    <tr>
      <td dir="auto">0043</td>
      <td dir="auto">O&#39;Brien&#39;s &quot;Stout&quot;</td>
      <td class="num" dir="auto">12</td>
      <td dir="auto"></td>
    </tr>
  </tbody>
</table>

常见问题

把输出粘贴到我的网站上安全吗?

数据无法注入标记:每个值、表头和表格标题都经过 HTML 转义,而且任何值都不会被放进属性中。输出中仅有的标签,是转换器自己写出的表格元素。

完整页面中的 lang 属性是怎么定的?

完整页面的语言标签取自你正在使用的网站语言。如果数据是另一种语言,请在下载后修改 lang 属性。

能对 HTML 表格排序或筛选吗?

输出是不带脚本的静态表格。请先用 CSV 行排序 或 筛选 CSV 行 处理数据,再进行转换。

标准与参考资料