HTML表格生成器

使用可视化编辑器创建HTML表格并立即复制代码。

行列标题行边框条纹行内边距

HTML输出

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

关于本工具

HTML表格生成器让您设置行列数、直接编辑单元格，并获得可用的HTML表格代码。可以可视化配置标题行、边框、条纹行和单元格内边距。

生成的HTML遵循具有proper thead和tbody结构的语义标记，对可访问性和屏幕阅读器更友好。代码在编辑时实时更新。

使用方法

设置行数和列数。
使用复选框切换标题行、边框和条纹行。
调整单元格内边距值。
点击任意单元格直接输入内容。
复制"HTML输出"下的代码并在项目中使用。

使用场景

非常适合数据对比表、定价表、日程表、产品规格表以及网页上以表格形式显示的任何信息。

常见问题

不用CSS能设置表格样式吗？ — 可以。生成的HTML包含border属性和cellpadding，因此无需CSS即可应用基本样式。
可以添加colspan或rowspan吗？ — 此工具生成基本表格结构。直接编辑生成的代码添加colspan/rowspan属性。
如何使表格响应式？ — 将表格包裹在overflow-x: auto的div中，或使用CSS媒体查询在小屏幕上允许水平滚动。