HTML表格生成器 | 可视化表格设计与代码导出工具

📋 表格基础设置

行数支持1-20行，默认3行

列数支持1-10列，默认3列

是否添加表头

是（第一行为表头）

🎨 样式设置

边框样式

边框宽度（px） 0为无边框，默认1px

边框颜色

表头背景色

表格背景色

文字对齐方式

单元格内边距（px）控制单元格内容与边框的距离，默认12px

👁️ 实时预览

表头1	表头2	表头3
内容1	内容2	内容3
内容4	内容5	内容6

📄 HTML代码

<table style="border-collapse: collapse; width: 100%; text-align: center; background-color: #ffffff; table-layout: fixed;">
  <thead>
    <tr>
      <th style="border: 1px solid #cccccc; background-color: #f5f7fa; padding: 12px; vertical-align: middle;">表头1</th>
      <th style="border: 1px solid #cccccc; background-color: #f5f7fa; padding: 12px; vertical-align: middle;">表头2</th>
      <th style="border: 1px solid #cccccc; background-color: #f5f7fa; padding: 12px; vertical-align: middle;">表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容1</td>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容2</td>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容3</td>
    </tr>
    <tr>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容4</td>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容5</td>
      <td style="border: 1px solid #cccccc; padding: 12px; vertical-align: middle;">内容6</td>
    </tr>
  </tbody>
</table>
                    