HTML表格生成器

使用可视化编辑器创建HTML表格。自定义行列、对齐、表头、边框和条纹，即时复制整洁的HTML代码。

4
4
1:
2:
3:
4:
 
<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
      <th style="padding: 8px; border: 1px solid #ddd;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
      <td style="padding: 8px; border: 1px solid #ddd;"></td>
    </tr>
  </tbody>
</table>
所有表格生成均在浏览器中处理。单元格内容自动进行HTML转义以确保安全。

使用方法

  1. 1

    设置表格大小

    使用+/-按钮调整行列数。最多支持20行和12列。

  2. 2

    输入单元格内容

    点击网格编辑器中的单元格输入内容。启用"表头行"时，第一行成为表头。

  3. 3

    自定义样式

    切换边框、条纹行、表头背景、响应式包装等选项来美化表格。

  4. 4

    复制HTML

    点击"复制"复制生成的HTML表格代码。

常见问题

可以在邮件中使用吗？
可以！使用内联样式，兼容会删除外部CSS的邮件客户端。
内容会被转义吗？
是的。所有单元格内容自动转义以防止XSS攻击。
可以设置列对齐吗？
可以！使用对齐按钮独立设置每列的对齐方式。
什么是响应式包装？
启用后表格会被包裹在带有overflow-x auto的div中，在小屏幕上可水平滚动。