We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
If this tool helped you, you can buy us a coffee ☕
可视化拖拽生成HTML表格代码，支持合并单元格和样式设置，一键复制代码。
我们这个工具解决的是“想用表格展示内容，但不想写HTML代码”的问题。下面几个场景里，它特别顺手：
如果你打开我们的HTML表格生成器，会看到左侧是画布，右侧是代码预览区。整个操作围绕“行列—内容—样式—代码”四步走：
如果你不小心改了行列，工具栏里还有“撤销”按钮，“清空表格”可以一键重置。
我们一起来做个最常见的小任务：生成一张星期课程表，放在个人网页里。假设课程表是5行6列，第一行为星期标题，第一列为时间段。
操作步骤：
时间/星期
8:00-9:30
高等数学
大学英语
体育
计算机基础
自习
...(后续行类似)
点击“复制代码”，这段代码就可以直接粘贴到你的HTML文件中，浏览器打开就能看到一张带背景色的课程表。
代码预览区生成的HTML代码符合标准规范，可以直接在任何现代浏览器中显示。你可以关注几个关键点来判断表格是否达到了预期：
border="1"或style="border:1px solid ..."，说明表格会有边框；如果没有边框，检查一下你是不是忘了在工具栏里设置边框粗细。colspan="数字"或rowspan="数字"，数字越大表示合并的列数或行数越多。如果发现合并后的单元格错位，多半是合并时选错了行列，可以回到画布里重新合并。<table>片段，不包含<html>、<body>等标签。你需要把它放到一个已有的HTML页面的<body>内部，否则浏览器无法渲染。width:100%），可以自适应父容器宽度，但如果你固定了表格的像素宽度，复制到不同宽度的页面时可能会撑破布局，需要手动调整。<td>或<th>手动添加width属性。Q：怎么添加或删除行/列？
在工具栏的“行数”“列数”输入框里修改数字，然后点击“生成表格”，会重新生成表格，但已有内容会丢失。如果想保留部分内容，建议先复制代码，再在新表格里粘贴数据。
Q：合并后的单元格怎么拆开？
选中已合并的单元格，点击“拆分单元格”按钮（如果工具栏有）即可恢复。如果没有拆分按钮，可以清空表格重新生成，或者复制代码后手动删除colspan/rowspan属性。
Q：生成的代码能直接用到Word里吗？
Word支持粘贴HTML格式，但样式可能会丢失。建议用在线表格生成器生成代码后，粘贴到网页中查看，再截图或导出为PDF用于Word文档，或者直接复制画布里的表格视觉效果截图。
Q：表格在手机上看会变形吗？
生成的表格默认宽度100%，会跟随屏幕宽度缩放，但如果列数太多、内容太长，在小屏上可能需要横向滚动。你可以给表格外层添加一个overflow-x:auto的容器，代码里没有自带，需要手动包裹。
现在你可以在上方的表格生成器里动手试试，拖拽出自己需要的行列，填入数据，一键复制代码，就能把漂亮的表格放进任何网页里。