网页数据一键转表格：AI Agent Skill设计与实战

做技术这一行，谁没经历过这种时刻：网页上明明白白摆着一张数据很规整的表格，可你要用它，就只能在Excel窗口和浏览器之间来回切换，手动一行一行复制粘贴。遇到带样式的、带合并单元格的、带分页的，复制过来全乱套，还得花时间重新排版。我做数据整理类的项目比较多，几乎每周都要被这种事磨掉一两个小时，后来实在忍不了了，就把这个需求做成一个AI Agent的Skill——给它一个网址，它能自己去理解网页结构、提取表格数据、整理成CSV或Excel直接输出，拿到手的文件还能继续编辑。今天不绕弯子，把整个Skill的设计思路、核心代码、踩坑记录都摊开讲。不管你是做运营、搞数据分析、写爬虫脚本，还是想给自己手头的AI工具加个实用技能，这篇都值得看完。

1. 先搞清楚：这个Skill到底解决什么问题

1.1 网页数据采集的三个传统痛点

先说一个很现实的问题：为什么大家天天跟网页打交道，却很少人能高效地把网页数据变成自己手里的表格？

痛点一是复制粘贴的低效。表格短还好办，一旦超过一屏，浏览器选中区域、Excel定位单元格、格式对齐，每一步都是时间黑洞。更麻烦的是，不少网页表格里嵌着链接、图片、按钮，复制过来要么丢了内容，要么混进一堆HTML标签。

痛点二是隐藏结构看不懂。你以为网页上那个表格就是个table标签？真去做过采集的人都知道，现在很多前端框架渲染出来的页面，表格是div套div，甚至数据是藏在JavaScript变量或者接口返回的JSON里，肉眼看着是表格，源码里根本没有table。手工复制根本拿不到干净数据。

痛点三是格式和编码的混乱。从网页复制到Excel，日期变数字、百分号变文本、换行符把单元格撑破、中文乱码……这些问题几乎每个手工整理过数据的人都撞到过，但很少有人系统性想过怎么解决。

这个Skill要解决的，就是把这三点一次性打包处理掉：自动识别网页里的表格式内容，提取成结构化数据，再输出成真正能编辑的表格文件。

1.2 Skill和普通爬虫脚本到底有什么区别

先解释一下这里的Skill是什么。如果你用过Claude Code、Codex这类AI编码工具，应该对Skill不陌生。简单说，Skill就是一套写给AI Agent看的操作手册加工具集，它告诉Agent："当你遇到某类任务时，按这套流程、用这些工具、按这个输出规范去完成。"

那它和传统写一段Python爬虫脚本有什么区别？区别在于能不能对话、能不能应变。

传统爬虫脚本是写死的：你告诉它URL规则、CSS选择器、翻页逻辑，它按步执行。一旦目标网页改版，脚本就废了。而Skill给AI Agent的是"能力"而不是"路径"——你把"理解网页结构、定位数据、输出表格"这几个步骤的目标和规范告诉它，AI在执行时会根据具体页面的实际情况调整策略，遇到div布局它会自己分析层级，遇到接口返回的数据它会顺着请求去挖。改版影响小，适应面广很多。

另一个区别是交付形态。脚本的输出通常是"数据文件"；Skill的输出可以是"数据文件+对话式反馈"。比如它抓完数据会告诉你："这个页面有10列，其中第3列是图片链接，我默认忽略了，如果你需要可以加参数保留。"这种可交互的形态，在真实工作中比闷头出一个文件要友好得多。

2. 网页数据变表格：核心原理拆解

2.1 网页里那些"表格"到底长什么样

要从网页里提取表格，首先得知道目标长什么样。我归纳下来，网页里的表格数据大致有四类形态，识别策略完全不同。

第一类是标准的HTML Table标签，也就是<table><tr><th><td>这套结构。这是最理想的情况，因为语义清楚，列头、行数据、合并单元格都有明确的标签表达，解析难度最低。早年的政府网站、学校官网、新闻网站大量使用这种结构。

第二类是CSS渲染的"假表格"。前端用div+class模拟表格样式，最常见的class命名就是table、row、col、grid之类。肉眼看着是表格，但源码里没有table标签。这种需要结合class名称、布局规律来判断哪些div组合在一起构成一行。

第三类是隐藏在数据层里的表格。很多页面是后端接口返回JSON，前端渲染成表格。打开网页源代码看不到任何数据，数据全在XHR请求的响应里。这类反而是最好处理的——直接找到数据接口，拿到的就是结构化JSON，转成表格几乎是零损耗。

第四类是"混合型"页面。比如页面主体用接口数据渲染，但某个角落的汇总信息是写死在HTML里的；或者表格数据分成多页，每页的URL带不同参数。最麻烦，需要分步处理。

2.2 三种数据识别策略，按优先级排

我在Skill里设计了三条路线，按优先级走，走不通再降级。

首先是结构直取。检测页面里的<table>标签，用解析库把所有表格全部提取出来，每个表格保留行列信息。遇到合并单元格，把rowspan和colspan属性展开成重复单元格，保证输出后行列对齐。

其次是启发式识别。没有table标签时，根据class名和DOM结构找"长得像表格"的区域。判断依据包括：是否存在规律重复的子节点、子节点的数量是否一致、是否有表头样式的差异化class（比如header、th这种词）。这个方法不保证100%准确，但能覆盖大部分div表格。

最后是接口追踪。如果页面是典型的SPA（单页应用），且经过前两步找不到需要的数据，就切换策略，从浏览器网络请求里找XHR请求，分析返回的JSON结构，把嵌套的数组展开成二维表。这个策略的关键是判断哪一个接口对应的是你看到的表格，而不是页面里的其他数据（比如导航栏、推荐位）。

注意：实际开发中，我强烈建议把三种策略都做进Skill的指令里，而不是只做一种。真实网页太复杂了，单一策略的覆盖率可能不到六成，三种策略叠加才能到九成以上。

2.3 输出格式怎么选：CSV、Excel、Markdown还是HTML

提取到数据之后，往哪个格式转换，这是很多人忽略但实际很关键的一步。我在Skill里做了四种输出格式的选择，各有使用场景。

我的默认推荐是CSV，原因很简单：它最接近"普通文本+分隔符"的本质，后续转成什么格式都方便。但如果是给不懂技术的同事用，务必选Excel，因为CSV用Excel打开时，中文容易乱码（这是另一个经典坑，后面排查部分细说）。

另外还有一个隐藏需求：很多人从网页复制表格其实是想直接粘贴到在线文档里，比如飞书文档、腾讯文档。这种场景下Markdown格式反而最顺手，复制过去就能变成真正表格。所以我在Skill里保留了--format markdown这个参数，专门给这类用户用。

3. 实操：自己动手写一个网页转表格Skill

3.1 Skill的基础结构和文件组织

先看一下Skill的标准目录结构。目前主流的Skill规范大同小异，核心就是一个SKILL.md文件，外加若干辅助脚本和资源目录。

code复制web-to-table/
├── SKILL.md              # 核心指令文件，告诉AI怎么做
├── scripts/
│   ├── fetch_page.py     # 抓取网页内容
│   ├── parse_table.py    # 解析表格数据
│   └── export_table.py   # 输出为CSV/Excel/Markdown
└── examples/
    └── sample_output.csv # 示例输出，帮助AI理解预期结果

SKILL.md是整个Skill的灵魂。它不需要写得像代码一样精确，但要像一份写给聪明新手员工的SOP——目标清晰、步骤明确、输出规范。AI Agent会通读它，在任务执行时按里面的指导行动。

我把SKILL.md分成几个区块：任务定义、依赖工具列表、执行步骤、处理规则、输出规范、常见异常处理。这样设计的好处是，AI在任何一个环节卡住时，都能快速定位到对应的规则说明，不用重新读整份文档。

3.2 核心指令：SKILL.md怎么写

这里直接放一份简化的SKILL.md内容，我在实际项目中就是从这个模板迭代出来的。注意，这份文档是给AI读的，不是给人读的，所以语言上尽量具体，减少歧义。

markdown复制# Skill: 网页数据转可编辑表格

## 任务定义
用户提供一个或多个网页URL，目标是提取页面中的表格数据，
并输出为可编辑的表格文件（CSV/Excel/Markdown）。

## 依赖工具
- Python 3.9+
- requests / httpx
- beautifulsoup4 / lxml
- pandas（用于表格整理和Excel导出）

## 执行步骤
1. 请求目标URL，设置合理的User-Agent，超时时间为15秒。
2. 先用正则或解析库检测页面中是否有<table>标签。
   - 有：直接解析table结构，注意处理thead/tbody。
   - 无：检查是否存在class含table/row/col/grid的元素，
     按子节点重复规律尝试识别。
   - 仍无：提示用户页面可能是动态渲染，询问是否需要
     追踪接口数据。
3. 将识别出的数据统一整理为二维列表，第一行为表头。
4. 根据用户指定的格式输出文件，默认CSV。
5. 输出完成后，简要总结提取结果：共提取几行几列、
   有哪些字段、是否跳过了非数据内容。

## 处理规则
- 合并单元格（rowspan/colspan）展开时，用上一行/左列的值填充。
- 忽略表格中的图片、按钮、公式等非文本内容。
- 如果表格中有日期列，统一转换为YYYY-MM-DD格式。
- 如果页面有多张表格，按出现顺序命名为表1、表2……，
  并在输出中标注每个文件对应的表格序号。

## 输出规范
- CSV文件编码统一为UTF-8-BOM，确保Excel打开不乱码。
- Excel文件至少包含一个Sheet，Sheet名默认"Sheet1"。
- 文件命名规则：网页标题或域名_日期.csv。

这里有几个容易被忽略的细节。编码用UTF-8-BOM，就是为了防止那一句"Excel打开CSV中文全乱码"的经典问题。合并单元格的展开规则也必须提前定义，否则AI在遇到rowspan="2"时容易直接把单元格留空，导致行列错位。

3.3 数据解析脚本：三个核心函数

SKILL.md是给AI的行为指导，但真正的脏活累活还是得靠脚本。我在Skill里放了三个Python脚本，分别负责抓取、解析、导出。下面贴核心代码，注释里写了设计思路。

python复制# scripts/fetch_page.py
# 职责：抓取网页，返回HTML文本
# 设计思路：单独拆出来是为了方便替换请求库，
# 以及统一处理重试和编码问题。

import httpx

def fetch_page(url: str, retries: int = 3) -> str:
    headers = {
        "User-Agent": ("Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
                       "AppleWebKit/537.36 (KHTML, like Gecko) "
                       "Chrome/120.0 Safari/537.36")
    }
    for attempt in range(retries):
        try:
            resp = httpx.get(url, headers=headers, timeout=15, follow_redirects=True)
            resp.raise_for_status()
            # 优先用响应头里的charset，其次用HTML中的meta声明，
            # 都找不到时默认utf-8。这一步能避免大量中文乱码。
            return resp.text
        except Exception as e:
            if attempt == retries - 1:
                raise RuntimeError(f"抓取失败: {e}")
    return ""

python复制# scripts/parse_table.py
# 职责：从HTML中识别并提取表格数据
# 设计思路：优先table标签，其次兜底div启发式识别。

from bs4 import BeautifulSoup

def parse_tables(html: str):
    soup = BeautifulSoup(html, "lxml")
    tables = []

    # 策略一：标准table标签
    for table in soup.find_all("table"):
        rows = []
        for tr in table.find_all("tr"):
            cells = []
            # 同时处理th和td，顺序遍历避免漏掉表头
            for cell in tr.find_all(["th", "td"]):
                rowspan = int(cell.get("rowspan", 1))
                colspan = int(cell.get("colspan", 1))
                text = cell.get_text(" ", strip=True)
                # 按rowspan和colspan展开单元格
                for _ in range(colspan):
                    cells.append(text)
                # rowspan展开逻辑在组装行时处理，这里标记重复行
            rows.append((cells, rowspan))
        tables.append(rows)

    # 策略二：div启发式识别
    if not tables:
        candidates = soup.find_all(class_=lambda c: c and any(
            kw in c for kw in ["table", "grid", "row"]))
        # 此处省略启发式细节，核心是找重复子结构
        pass

    return tables

python复制# scripts/export_table.py
# 职责：把二维数组导出为目标格式
# 设计思路：用pandas统一处理，减少自制导出逻辑的bug。

import pandas as pd

def export_table(data, output_path: str, fmt: str = "csv"):
    df = pd.DataFrame(data[1:], columns=data[0])
    if fmt == "csv":
        # utf-8-sig 就是带BOM的UTF-8，Excel友好
        df.to_csv(output_path, index=False, encoding="utf-8-sig")
    elif fmt == "excel":
        df.to_excel(output_path, index=False, sheet_name="Sheet1")
    elif fmt == "markdown":
        df.to_markdown(output_path, index=False)
    else:
        raise ValueError(f"不支持的格式: {fmt}")

pandas的to_markdown方法是我后来才发现的，简直神器——一行代码就把DataFrame变成Markdown表格，不用自己拼管道符。

3.4 实际跑一个案例：从招聘页面到Excel

光讲原理不过瘾，我拿一个实际案例走一遍流程。这个案例是我上周处理过的：某招聘网站的岗位列表页，上面有职位名称、公司、薪资范围、工作地点、发布时间五列数据，大概40行，页面用div渲染，没有table标签。

第一步，把URL交给Skill，我指定输出Excel格式。Skill先请求页面，拿到HTML后做编码检测，发现是UTF-8页面，没问题。第二步，解析脚本找不到table标签，自动转到启发式识别。通过观察class命名，发现每个岗位卡片都使用相同的job-item类，且内部子节点结构完全一致——典型的"伪表格"。

第三步，AI根据启发式规则判断，job-item类下的五个子div分别对应五列数据。这里有个小坑：薪资范围那一列在某些岗位里是两个span组成的，一个写"20K-40K"，另一个写"· 13薪"，不处理的话会被拆成两列。我在处理规则里预置了"同层级内并列的文本片段合并为同一单元格"的规则，AI执行时就自动合并了。

第四步，导出Excel。整个过程大概两分钟。等我把文件名从jobs_20250108.xlsx改成更有意义的名字时，同事还在对着网页复制粘贴，这就是效率差距。

4. 踩坑记录：常见问题与排查方法

4.1 抓回来的内容为空或乱码

这个坑我踩得最多，而且原因千奇百怪，整理成一张速查表放在Skill的文档里，遇到问题直接对照排查。

有一次我抓某个电商平台的参数表格，怎么抓都是乱码，后来发现页面用的是GB2312编码，而我的脚本第一版写死了UTF-8解码。后来改成先读响应头charset，再读HTML里的<meta charset>，最后才用默认值，这个问题的命中率就低多了。

4.2 表格行列对不齐

网页表格和Excel表格的最大区别在于，网页允许合并单元格，Excel也允许，但CSV不允许。所以从网页转CSV时，如果遇到rowspan和colspan，必须展开填充。

举例说明：一个表格第一行有一个rowspan="2"的单元格"部门"，第二行对应的格子就是"空"。如果不做填充处理，CSV里那行就会少一列数据，整个表格全错位。

我在处理规则里明确写了：展开合并单元格时，rowspan导致的空白由同一列上一行的值填充，colspan导致的空白由同一行左侧的值填充。这样虽然数据有重复，但表格结构是完整的，后续透视、排序都不会出错。

另外还有一类错位问题：HTML里有些单元格的内容其实是隐藏的，比如style="display:none"。要不要提取这类内容，取决于具体场景。我默认忽略，但也在规则里留了开关，用户可以通过参数--include-hidden要求保留。

4.3 动态页面和翻页

现在纯静态的表格页面越来越少了，尤其是后台管理系统、数据大屏、在线报表，基本都是动态加载。遇到这类页面，Skill会建议走接口追踪路线：在浏览器开发者工具里找到返回数据的XHR请求，把它作为输入给Skill。

这里有个技巧：很多数据接口会带时间戳或者加密签名参数，直接替换URL里的参数可能请求失败。我的处理方式是：优先让用户提供完整的请求信息（URL、请求头、请求体），Skill拿到后原样模拟，而不是自己"聪明"地修改参数。

翻页问题就是另一回事了。网页翻页有两种方式：一种是URL带页码参数，比如?page=2；另一种是点击"加载更多"按钮触发接口请求。第一种好办，遍历页码逐个抓取即可；第二种就需要先抓住接口的请求规律。我的规则是：先抓第一页和第三页做对比，如果发现URL或请求体里的页码参数规律，就自动循环抓取，如果看不出规律，就提示用户手工提供翻页规则。

4.4 请求失败和网络异常

网页请求失败是家常便饭。经常遇到的现象是"该网页无法正常运作，服务器未发送任何数据"，浏览器里显示ERR_EMPTY_RESPONSE。这个错误的原因很杂，可能是目标服务器临时故障、连接被重置、或者是某些中间设备拦截了请求。

我的排查顺序是：先确认是不是单页问题——换个浏览器访问试试，如果浏览器也打不开，说明是网站侧的问题，Skill这边再重试也白搭，直接告诉用户稍后再试。如果浏览器能打开但脚本不行，多半是请求头被识别成机器人了，调整User-Agent、补上Accept-Language、Referer这些常规头信息，命中率会提高不少。

注意：处理网络请求时，千万别一上来就加代理或者换节点重试。先确认目标站点本身的可用性，再检查自己的请求头，绝大多数问题都能在这两步解决。

5. 进阶：从"能用"到"真正好用"

5.1 数据清洗规则的沉淀

表格提取出来只是第一步，真实业务场景里的数据永远不会干净。我在这版Skill里预置了一套清洗规则，按优先级执行：

去空白和杂散字符。HTML解析经常会带出\xa0（不间断空格）、\n、\t等字符，统一替换为普通空格，连续多个空格压缩成一个。这一步不做，后面做数据匹配时全是坑。

统一日期格式。网页上的日期写法五花八门：2024年1月8日、2024/1/8、1月8日、Jan 8, 2024……我在规则里定义统一输出为YYYY-MM-DD，AI在识别到日期类字段时自动转换。这个规则特别有用，因为我见过太多人拿到数据后在Excel里手工处理日期格式，一干就是一下午。

数字和单位的处理。网页上"20K-40K·13薪"这种写法，如果字段是薪资，应该拆成"最低薪资""最高薪资"两列，并统一单位；如果字段是销量，需要从"1.2万"转成"12000"。这些规则没法穷举，所以我给AI的指令是"遇到数值类字段，先询问用户是否要统一单位，再决定是否转换"，把选择权交回给用户。

5.2 和其他工具的联动场景

这个Skill最爽的用法不是单独跑，而是串进工作流里。我在实际使用中，至少有三种联动场景是高频的。

第一种是配合在线文档机器人。比如飞书机器人，Skill把网页表格导出成CSV后，机器人脚本读文件再发到群里或者写入多维表格。这个流程对于定期更新数据报表的场景特别实用——每周末跑一次，群里的表格自动刷新，不用人肉盯。

第二种是配合Obsidian这类笔记软件。我在笔记里维护了一个读书清单表格，有些书的出版信息要从出版社网站抓。用这个Skill抓下来转成Markdown表格，直接粘贴进笔记，格式完美兼容。以后后记整理资料再也不用担心"复制过来格式全乱了"。

第三种是配合数据分析流程。Skill输出CSV后，直接交给pandas做进一步处理，或者导入到BI工具。因为中间环节是标准CSV，和任何工具都能对接。我还试过让AI Agent把多张网页表格合并成一张总表——比如从几个竞品官网各抓一张价格表，按产品型号做关联合并，输出一个对比表。这个场景做市场调研的人应该深有体会。

5.3 维护和迭代Skill的一点心得

Skill这种东西，不是写完就完事的。我在迭代过程中有几点体会，分享给大家。

第一，把每次遇到的失败案例都补进SKILL.md。比如第一次遇到div表格识别失败，我就把当时的页面结构特征写进规则里，下次AI遇到类似结构就有经验了。这个习惯坚持半年后，我的SKILL.md从最初2页涨到了8页，但识别成功率提升明显。

第二，不要试图用一个Skill覆盖所有网站。有些站点结构特别特殊，单独为它写针对性规则更划算。我在Skill里加了一个site_specific/目录，专门存放针对特定网站的解析规则。这样通用规则保持简洁，特殊规则按站点隔离，两者互不干扰。

第三，关于Skill的命名和发布。如果你打算把自己的Skill分享出去，名字一定要直白。我当时发布这个Skill时，纠结过用"web-scraper"、"table-extractor"这类英文名，最后还是选了"web-to-table"这种一眼能看懂名字。社区里看到那些收藏量高的Skill，几乎都是名字和描述直接说明"能干什么"，而不是起一个文艺的名字让人猜。搜索热词里的"skill推荐"、“skill发布”，本质上大家想找的就是这类能直接上手用的工具，命名和文档越直白，获得到的认可越多。

说实话，Skill这类东西的技术门槛并没有多高，真正的门槛在于你愿不愿意把重复劳动抽象成一套流程。我做了这个网页转表格的Skill之后，不只是自己省了时间，还顺手把它教给了团队里不怎么会写代码的同事，他们现在遇到"把网页数据整理成表格"的需求时，第一反应也不再是复制粘贴，而是喊一句"让Skill跑一下"。在我看来，这就是工具存在的意义——把那些消耗注意力的琐碎活交给机器，把时间留给真正需要判断力的工作。