Emmet 中用 table 缩写可快速生成 HTML 表格骨架，如 table>thead>tr>th{列名}4+tbody>tr3>td{--}*4，并支持 class、caption、$编号等语法；需注意语言模式、英文输入法及 thead/tbody 的语义化包裹。

用 table 缩写生成基础表格骨架

直接输入 table 再按 Tab，就能生成空的 <table></table>；但真正省时间的是嵌套写法。比如要快速搭一个带表头和 3 行数据的结构，写 table>thead>tr>th*4+tbody>tr*3>td*4，回车后自动展开为完整 HTML 表格框架。

注意：th*4 会生成 4 个 <th></th>，但默认没内容；如果想每列带文字，得加 {}，比如 th{列名}*4。

给表格加 caption、class 和样式类名

Emmet 支持在标签后紧跟属性，不需要切出标签再补。例如：

• table.mytable>caption{用户信息}+thead>tr>th{姓名}+th{年龄}+th{城市}
• tbody>tr*5>td{--}*3 可快速填充 5 行 × 3 列的占位单元格

常见坑：.mytable 必须紧贴 table 后面（不能有空格），否则生成的是 <table class="mytable"> 还是 <div class="mytable"><table> 就不确定了——Emmet 会把点号前无标签名的写法当成新元素。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

批量生成带序号的 tr 或 td，用好 $

需要给每行加唯一 class（如 row-1、row-2）时，$ 是关键。写 tr.row$*3 会生成：

<tr class="row1"></tr>
<tr class="row2"></tr>
<tr class="row3"></tr>

进阶用法：td.item$@10*4 表示从 10 开始编号，生成 item10 到 item13；td.item$$$*2 会补零成 item001、item002。别漏掉 *，否则只生成一个元素。

在 VSCode/Sublime 中触发失败？检查这三点

不是所有文件都默认启用 Emmet。常见失效原因：

• 当前文件语言模式不是 HTML（右下角看，如果不是，点开切换）
• 缩写写在已有标签内部（比如 <body> 里写了 table 却没换行），部分编辑器不响应
• 用了中文输入法——Emmet 对输入法敏感，必须是英文状态按 Tab

VSCode 用户可手动触发：Ctrl+E（Windows/Linux）或 Cmd+E（macOS），比等 Tab 提示更可靠。

实际写表格时，最易忽略的是 thead 和 tbody 的显式包裹——Emmet 不强制生成它们，但语义化和 CSS 选择器控制（比如给 thead th 单独设背景）全靠这个结构撑住。别图快跳过。