Softonic

HTML表格生成器

步 1 / 4

支持带引号的 CSV 字段、电子表格制表符、分号分隔行及 Markdown 分隔行。最多 50 行、20 列，每个单元格 1,000 个字符。

表格数据
表格数据

为十行数据集手写<table>、<thead>、<tbody>和<tr>代码十分繁琐。只需粘贴制表符分隔的CSV或Markdown表格数据，该生成器即可输出结构清晰的HTML代码：包含语义标签、可选的<caption>标识、正确的作用域属性，并提供斑马条纹样式、边框或Tailwind类别的多种选择，可直接用于文章或仪表板中。

如何创建HTML表格

  1. 1

    粘贴您的数据

    TSV（从电子表格复制）、CSV或Markdown表格语法均能正确解析。

  2. 2

    选择表格选项

    标题行、图注、斑马纹条纹、紧凑或宽敞的行距。

  3. 3

    选择样式模式

    纯HTML、内联样式、Bootstrap类或Tailwind类。

  4. 4

    复制标记

    输出内容为有效的语义化HTML，而非伪装成表格的`<div>`网格格式。

语义表格结构

带有正确标签的表格易于访问、适配屏幕阅读器且便于样式设置。该生成器可生成如下结构：

<table>
  <caption>第一季度销售数据</caption>
  <thead>
    <tr>
      <th scope="col">地区</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

元素及其作用

元素 用途
<caption> 表格摘要，首先由屏幕阅读器读取
<thead> 列标题，与正文单独显示
<tbody> 数据行
<tfoot> 总计值及脚注均置于底部，无论代码位置如何
<th scope="col"> 列标题
<th scope="row"> 行标题（例如每行的第一个单元格）
<td> 数据单元格

响应式样式

  • 水平滚动：将表格置于<div style="overflow-x:auto">格式中，使窄视口可实现滚动而不会破坏布局。
  • 移动端堆叠功能：可将标题重复为data-label属性，并通过CSS将行转换为垂直卡片布局，适用于小型数据集。
  • 采用网格布局的回流设计：复杂表格可通过CSS网格布局重新构建，但会失去原生键盘导航功能；仅适用于仪表板场景。

可访问性检查清单

  • 每个 <th> 都具有 scope 属性。
  • 复杂的单元格合并使用 headers="..." 将数据单元格与表头 ID 关联。
  • 用表格标题概述表格的用途。
  • 请勿使用表格进行视觉布局，应改用 CSS 网格或 Flexbox。

常见问题

可以。电子表格剪贴板数据采用TSV（制表符分隔）格式，该生成器可原生解析：每一行转换为<tr>，以制表符分隔的单元格转换为<td>。

适用于所有可控制元素的CSS类；专为电子邮件设计的内联样式（适用于外部样式表常被屏蔽的情况）；Bootstrap和Tailwind模式则为这些框架提供即用型的类标记代码。

不会自动合并。导入的每个值都会成为一个独立单元格。复制 HTML 后可自行添加 colspan 或 rowspan，并检查表头关联，因为合并单元格可能需要 id 和 headers 属性。

是的，系统已新增 scope="col" 和 scope="row" 属性；当您提供该属性时，系统将生成 <caption>。对于复杂表格，请使用屏幕阅读器或 axe DevTools 扩展工具进行验证。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

HTML到文本转换器

从标记中剔除所有HTML标签及元素，生成适用于电子邮件客户端、数据分析及索引处理的纯文本格式。

文件差异检查器

逐行比较两个文件或代码片段，高亮显示新增、删除和修改的内容，还可选择忽略空白和大小写。

此工具还提供其他语言版本