Webページの表をExcelにきれいに貼り付けるには？

ブックマークレットで表をTSV（タブ区切り）としてコピーすると、Excelやスプレッドシートにそのまま貼り付けたときにセル単位で正しく分かれる。ページからドラッグでコピーすると崩れやすいのを防げる。

TSVとCSVはどちらを使えばいい？

Excelやスプレッドシートにそのまま貼り付けるならタブ区切りのTSVが確実。ファイルとして保存したり他のツールに渡すならCSVが向く。セル内にカンマを含む表ではTSVのほうが崩れにくい。

特定のサイトでしか使えない？

標準のHTMLテーブル（table要素）を対象にしているため、サイトを問わず使える。ページ上に複数の表があるときは、コピーしたい表をクリックして選ぶ。

HTMLの表をTSV/CSVとしてコピーするブックマークレット（Excel・スプレッドシートに崩れず貼り付け）

Webページに載っている表（料金表、比較表、ランキングなど）をExcelやスプレッドシートに取り込みたいとき、範囲選択してそのままコピー＆ペーストすると、セルがずれたり1つのセルに全部入ってしまったりして崩れることがある。サイトのスタイルや余計な装飾が混ざるのが原因だ。このブックマークレットは、ページ上のHTMLテーブルをクリックで選んで、TSV（タブ区切り）またはCSVとしてクリップボードに入れる。タブ区切りで貼り付けるとセル単位できれいに分かれるので、表計算ソフトへの取り込みが一気に楽になる。特定のサービスに依存しないので、どんなサイトの表でも使える。

ブックマークレット

次のコードをブックマークのURL欄に設定する。

javascript:(function(){var mode=confirm('OK=TSV（Excel/スプレッドシート向け）, キャンセル=CSV')?'tsv':'csv';function cell(c){return c.innerText.replace(/[\t\r\n]+/g,' ').trim();}function rows(t){return [].map.call(t.rows,function(tr){return [].map.call(tr.cells,cell);});}function tsv(r){return r.map(function(x){return x.join('\t');}).join('\n');}function csv(r){return r.map(function(x){return x.map(function(c){return /[",\n]/.test(c)?'"'+c.replace(/"/g,'""')+'"':c;}).join(',');}).join('\n');}function out(t){var r=rows(t);if(!r.length){alert('この表には行がありません');return;}var text=mode==='tsv'?tsv(r):csv(r);navigator.clipboard.writeText(text).then(function(){toast(r.length+'行を'+mode.toUpperCase()+'でコピーしました');}).catch(function(){var ta=document.createElement('textarea');ta.value=text;document.body.appendChild(ta);ta.select();try{document.execCommand('copy');toast(r.length+'行を'+mode.toUpperCase()+'でコピーしました');}catch(e){toast('コピーに失敗しました');}ta.remove();});}function toast(m){var d=document.createElement('div');d.textContent=m;d.style.cssText='position:fixed;top:16px;left:50%;transform:translateX(-50%);background:#667eea;color:#fff;padding:8px 16px;border-radius:4px;z-index:99999;font-family:sans-serif;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.3)';document.body.appendChild(d);setTimeout(function(){d.remove();},2000);}var tables=[].slice.call(document.querySelectorAll('table'));if(!tables.length){alert('このページには表（table要素）が見つかりませんでした');return;}if(tables.length===1){out(tables[0]);return;}function clear(){tables.forEach(function(t){t.style.outline='';t.style.cursor='';t.removeEventListener('click',pick,true);});}function pick(e){e.preventDefault();e.stopPropagation();var t=e.currentTarget;clear();out(t);}tables.forEach(function(t){t.style.outline='2px solid #667eea';t.style.cursor='pointer';t.addEventListener('click',pick,true);});toast('コピーしたい表をクリックしてください（'+tables.length+'個）');})();

登録手順

ブックマークバーを右クリックして、新しいブックマークを作る
名前を「表をコピー」など分かりやすいものにする
URL欄に上のコードを貼り付けて保存する

使い方

表のあるページでブックマークレットをクリックする
形式を聞かれるので、Excel・スプレッドシート向けなら「OK」（TSV）、ファイル保存などには「キャンセル」（CSV）を選ぶ
ページに表が1つだけならそのままコピーされる
表が複数あるときは枠が青くハイライトされるので、コピーしたい表をクリックする
「◯行をコピーしました」と表示されたら、Excelやスプレッドシートに貼り付ける

TSVを貼り付けると、表計算ソフト側がタブを列の区切りとして解釈するため、セルがきれいに分かれる。CSVはファイルとして保存したり、他のツールにデータを渡したりするときに向く。

どう動いているか

まず、表（table 要素）を二次元配列に変換する。各行（tr）の各セル（td / th）からテキストを取り出すだけだが、セル内に改行やタブが入っていると区切りが崩れるので、半角スペースに置き換えておく。

// 1つの表を二次元配列に変換する
function tableToRows(table) {
  return [...table.rows].map((tr) =>
    [...tr.cells].map((cell) => {
      // セル内の改行・タブは半角スペースに置換しておく
      return cell.innerText.replace(/[\t\r\n]+/g, ' ').trim();
    })
  );
}

TSVは各セルをタブ、各行を改行でつなぐだけで完成する。CSVの場合は、セルにカンマ・引用符・改行が含まれていると区切りが壊れるため、その場合だけ全体をダブルクォートで囲み、セル内の " は "" にエスケープする（RFC 4180 の方式）。

// TSV（タブ区切り）はそのまま連結するだけ
function toTSV(rows) {
  return rows.map((r) => r.join('\t')).join('\n');
}

// CSVはカンマ・引用符・改行を含むセルを "..." で囲む
function toCSV(rows) {
  return rows.map((r) =>
    r.map((c) => /[",\n]/.test(c) ? '"' + c.replace(/"/g, '""') + '"' : c).join(',')
  ).join('\n');
}

ページに表が複数あるときは、すべての表に青い枠を付けてクリックできるようにし、選ばれた表だけを変換する。クリック時にはリンク遷移などを止めたいので、イベントをキャプチャ段階で受け取って preventDefault() している。

// 表が複数あるときはクリックで選べるようにする
const tables = [...document.querySelectorAll('table')];

tables.forEach((t) => {
  t.style.outline = '2px solid #667eea';
  t.style.cursor = 'pointer';
  t.addEventListener('click', onPick, { once: true });
});

注意

標準の table 要素が対象。div を並べて見た目だけ表にしているレイアウトは取得できない。
結合セル（colspan / rowspan）はそのままの並びで出力されるため、複雑な表では列がずれることがある。
セル内の改行は半角スペースに置き換わる。元の改行を保ちたい用途には向かない。
クリップボードへの書き込みがブロックされた環境では、一時的なテキストエリア経由でコピーを試みる。

よくある質問

Webページの表をExcelにきれいに貼り付けるには？: ブックマークレットで表をTSV（タブ区切り）としてコピーすると、Excelやスプレッドシートにそのまま貼り付けたときにセル単位で正しく分かれる。ページからドラッグでコピーすると崩れやすいのを防げる。
TSVとCSVはどちらを使えばいい？: Excelやスプレッドシートにそのまま貼り付けるならタブ区切りのTSVが確実。ファイルとして保存したり他のツールに渡すならCSVが向く。セル内にカンマを含む表ではTSVのほうが崩れにくい。
特定のサイトでしか使えない？: 標準のHTMLテーブル（table要素）を対象にしているため、サイトを問わず使える。ページ上に複数の表があるときは、コピーしたい表をクリックして選ぶ。

ブックマークレット

登録手順

使い方

どう動いているか

注意

関連記事

よくある質問