CSV 转 HTML 表格转换器 (CSV→HTML)
将 CSV 文件转换为使用 <table><tr><td> 标记的 HTML 代码片段。可选择分隔符、是否将首行作为表头、是否用 <thead>/<tbody> 包裹。转换结果可实时预览，并支持复制或下载。转换完全在浏览器内完成，数据不会发送到服务器。
| 分隔符 |
|
|---|---|
| 将首行作为表头 | |
| 用 thead/tbody 包裹 |
预览
HTML 代码
已复制！输入 CSV 数据后，转换后的 HTML 表格会显示在这里。
CSV 行与 HTML 表格的对应关系
| 一行 CSV | name,age,city |
|---|---|
| 转换后的 HTML 标记 | <tr><td>name</td><td>age</td><td>city</td></tr> |
当首行被用作表头时，会转换为一行 <th> 标签；此后的每一行都会转换为一行 <td> 标签。
CSV→HTML 表格转换是什么
以 HTML 撰写表格，须逐列排上 <tr>、逐格排上 <td>，手工作业相当费时。本工具会读取 CSV，转换为 <table> 形式的 HTML 片段。结果可当场预览，因此在复制之前便能确认贴上后的呈现样貌。
储存格内的 <、>、& 会自动转换为 HTML 实体，故含有符号的数据也不会使显示错乱。是否以 thead、tbody 包覆亦可选择。就语意而言加上较为理想，但在 HTML 邮件等解读不稳定的环境中，去除后的最小构成较为稳定。
HTML 表格的制作方式
- 贴上 CSV 在输入栏贴上 CSV。若自电子表格软件复制，请将分隔字符改为定位字符。
-
决定标题列的处理
启用「以首列为标题」后，第一列便会以
<th>标签输出。 - 选择 thead／tbody 的有无 通常维持加上即可。若为 HTML 邮件等显示不稳定的环境，请予去除。
- 以预览确认后复制 查看实际算绘出的表格，若无问题便复制 HTML 代码贴上。
用好本工具的小技巧
- 粘贴到 HTML 邮件或不支持 Markdown 的旧版 CMS 时，不带 thead/tbody 的最简输出往往更容易正常显示。
- 单元格中的
<、>、&会自动转义为 HTML 实体，因此粘贴生成的代码不会破坏页面布局。 - 预览会按浏览器实际渲染方式显示转换后的表格，方便你在复制代码前确认显示效果。
- 可与姊妹工具 CSV 转 Markdown、CSV 转 JSON 搭配使用，将同一份 CSV 按需转换为三种不同格式。
CSV→HTML 转换的活用场景
在部落格或 CMS 刊载表格
即使是不支援 Markdown 的 CMS，只要贴至 HTML 编辑模式便可刊载表格。
在 HTML 邮件中放入表格
邮件不会解读 Markdown，故放入表格须用 HTML。去除 thead／tbody 的最小构成较为稳定。
制作实作前的模型
在画面设计阶段，可立即将接近实际数据的表格转为 HTML，亦可用于确认样式的套用情形。
安全刊载含符号的数据
含不等号或&的值也会自动转义，因此贴上后版面不会破损。
HTML 表格的用语
- table 元素
- 指表示表格的 HTML 标签。就其表现具有列与栏之实际数据的本来用途而言，至今仍是最合适的标签。
- th 与 td
<th>为标题储存格，<td>为资料储存格。加以区别可让朗读软件传达其对应关系。- thead／tbody
- 指就语意区分标题部分与本文部分的标签。亦与长表格列印时重复显示标题的行为有关。
- HTML 实体
- 指为安全显示符号的写法。
<会被置换为<之类的形式。 - 表格版面配置
- 指以表格框线构成整页分栏的旧手法。现今已被视为明确的反模式。
常见问题
<table> 标记，因此可以直接粘贴到 WordPress 的 HTML 编辑模式，或 HTML 邮件的正文中。
闲话 ― 为什么 <table> 标签至今仍未消失
在上世纪90年代末 Web 发展初期，用 <table> 标签搭建整个页面布局的"表格布局"曾是主流做法。当时 CSS 的排版能力有限，表格几乎是实现多栏布局的唯一实用手段，因此那个年代的 HTML 源码中充斥着与表格数据本身毫无关系的 <table> 元素。
如今 CSS 已经成熟，Flexbox 与 Grid 广泛普及，用表格做布局早已被视为典型的反模式。但在其本来的用途——表示按行列组织的真实数据——上，<table> 依然是最合适、也最具无障碍访问优势的标签，因为屏幕阅读器能够识别并朗读 <th> 与 <td> 之间的对应关系。
将 CSV 内容粘贴到博客文章或邮件通讯中的需求至今依然普遍存在，因为 HTML 邮件无法渲染 Markdown，部分 CMS 也没有 Markdown 插件。能一键将电子表格结果转换为 HTML 表格的工具，正好满足了这种朴素却长期存在的实际需求。