VKT ツールキット · 2026年8月28日 · 約5分で読めます

ウェブテーブルの結合セルをエクスポートする方法（rowspan/colspan ガイド）

政府のレポート、財務諸表、学校の時間割 — ウェブ上でもっとも有用なデータテーブルは、同時に最も複雑なものでもあります。カテゴリをグループ化したり、ヘッダーを列にまたがせたり、多段階レイアウトを作成するために結合セルを使用しています。そして、それらを Excel にコピーしようとしたとき、すべてが崩れてしまいます。

このガイドでは、なぜ結合セルが崩れるのか、rowspan と colspan が実際に何であるか、そして手動クリーンアップなしで正しくエクスポートする方法を説明します。

rowspan と colspan とは？

HTML では、テーブルは <tr>（行）、<td>（データセル）、<th>（ヘッダーセル）で構築されます。2つの属性がセルの結合を制御します：

• rowspan="3" — このセルは垂直に3行にまたがります；
• colspan="2" — このセルは水平に2列にまたがります。

政府の予算テーブルからの典型的な例です：

ヘッダー「Department」は2行にまたがり、「Budget (USD)」は2列にまたがります。これによりきれいな階層構造が生まれますが、まさにこれがコピー＆ペーストで崩れる原因です。

結合セルがコピー＆ペーストで崩れる理由

ブラウザでこのテーブルを選択して Ctrl+C すると、ブラウザはクリップボードに生の HTML を送信します。Excel はそれを受け取り、HTML セルをスプレッドシートのセルにマッピングしようとします。問題点：

• rowspan セル — Excel は最初の行にのみ値を貼り付け、次の行の最初のセルを空のままにすることがあります。「Education」ラベルが2番目のデータ行から消えてしまいます；
• colspan セル — Excel は結合ヘッダーを1つのセルに押し込みますが、隣接するセルを空白のままにし、後続のすべての列を右にずらすことがあります；
• 多段階ヘッダー — rowspan と colspan の両方を使用した2〜3行のヘッダーを持つテーブルは、完全に文字化けした出力を生成します；
• ネストされたテーブル — 一部のサイトではテーブルセル内にテーブルを配置しています。コピー＆ペーストはそれらを1つのフラットなテーブルとして処理し、構造を破壊します。

結果：表示に2秒かかったテーブルの手動クリーンアップに30分かかる。

解決策：レンダリングされたコピーではなく HTML 構造を読み取る

根本的な問題は、コピー＆ペーストがレンダリングされた出力を操作するという点にあります。結合セルを正しく取得するには、基盤となる HTML 属性 — 実際の rowspan と colspan の値 — を読み取り、エクスポート前にグリッドを数学的に再構成するツールが必要です。

それがまさにVKT TableGrabが行うことです：

1. ページ上のすべての <table> 要素をスキャンします；
2. 各セルの rowspan と colspan 属性を読み取ります；
3. 2D グリッドを構築し、結合された値をすべての結合セルに充填します；
4. グリッドを適切に構造化された CSV としてエクスポートします。

結果：「Education」が必要なすべての行に表示され、「Budget (USD)」がヘッダーとして正しくまたがり、すべての列が揃います。

結合セルテーブルに TableGrab を使用する方法

1. Chrome ウェブストアまたはEdge アドオンからインストールします；
2. 複雑なテーブルがあるページを開きます；
3. TableGrab アイコンをクリックすると、すべてのテーブルが自動検出されます；
4. リストのテーブルにホバーすると、ページ上でハイライトされます；
5. エクスポートをクリックすると、結合セルが正しく再構成された CSV がダウンロードされます。

DevTools、スクリプト、手動修正は不要です。無料プランは1ページあたり最大5テーブルに対応しており、ほとんどのレポートには十分すぎる量です。

よくある質問

VKT ブログで更多くのガイドをご覧ください；ご質問は [email protected] まで。