ロゴ
ToolkitsLabEfficiency Hub
PR広告を含む

表データ⇄HTMLテーブル変換ツールExcel・スプレッドシートの表とHTMLコードを相互変換

コピーした表データをHTMLの<table>タグに変換、またはHTMLテーブルをCSV・TSV・Markdown表に変換します。 見出し行の設定や罫線・縞模様などの見た目もその場で調整できます。

表データを貼り付け

0行 × 0区切り文字:カンマ(自動検出)

生成されたHTMLコード

プレビュー

データを入力するとプレビューが表示されます

変換設定

区切り文字

セルの余白

ADVICE

結合セル(colspan・rowspan)には対応していません。表を貼り付けたら、プレビューで列数がずれていないか確認しましょう。

表データとHTMLテーブルの変換が必要になる場面とは

ブログ記事やLP(ランディングページ)に表を埋め込みたいとき、Excelやスプレッドシートで作った表をそのまま貼り付けても、多くのCMSやHTMLエディタでは正しい<table>タグのマークアップには変換されません。逆に、Webサイト上のHTMLテーブルからデータだけを抜き出してExcelで集計したい、という場面もよくあります。

本ツールは、「表データ(タブ・カンマ区切り)→HTML」と「HTMLテーブル→表データ(CSV・TSV・Markdown)」の双方向の変換に対応したオンラインツールです。見出し行の指定、罫線や縞模様といった見た目のオプション、生成コードのプレビューまで、その場で完結して確認できます。

コーディング作業や記事執筆の合間に、表計算ソフトとHTML・Markdownの間を素早く行き来したいときにご活用ください。

こんなシーンで便利です

ブログ記事やLPに表を埋め込みたい時に

Excelやスプレッドシートで作成した比較表・料金表を、記事のHTMLエディタにそのまま貼り付けられる<table>タグのコードに変換できます。

Webサイトの表データをExcelで開きたい時に

他サイトのHTMLテーブルのソースコードをコピーし、CSVまたはTSV形式に変換すれば、Excelやスプレッドシートにそのまま貼り付けて集計・編集できます。

GitHubのREADMEやNotionにMarkdown表を作りたい時に

HTMLテーブルやスプレッドシートの表データを、GitHub・Notion・Qiitaなどで使われるパイプ区切りのMarkdown表記法に変換できます。

表の見た目(罫線・縞模様)を調整しながらコードを作りたい時に

罫線の有無やヘッダーの色、1行おきの縞模様、セルの余白など、見た目のオプションを切り替えながらプレビューを確認し、そのまま使えるHTMLコードを生成できます。

使い方は簡単 4ステップ

  1. 変換したい方向(「表データ→HTML」または「HTML→表データ」)を選びます。
  2. 入力欄に、Excel・スプレッドシートからコピーした表データ、またはHTMLの<table>コードを貼り付けます。
  3. 「1行目をヘッダーとして扱う」など必要な設定をオン・オフで切り替えます。
  4. 生成されたコードとプレビューを確認し、コピーまたはファイルとしてダウンロードします。

変換処理はすべてブラウザ内で完結し、貼り付けた表データやHTMLコードが外部に送信されることはありません。

ご利用時の注意点

  • 結合セル(colspan・rowspan)には対応していないため、複雑に結合された表は列数がずれる場合があります。
  • HTMLテーブルの解析では、セル内の文字装飾(太字・リンクなど)は反映されず、テキスト内容のみが抽出されます。
  • 生成したHTMLコードは基本的な構造とインラインスタイルのみのシンプルな出力です。CMSやテーマ側のCSSと干渉する場合は、適宜スタイルを調整してください。
  • 完全無料・安全:入力した表データやHTMLコードはサーバーに送信されない、通信が発生しないブラウザ完結型のツールです。

対応している変換形式と主な用途

本ツールが対応している変換の組み合わせと、それぞれの代表的な使いどころです。

変換の方向主な用途特徴
表データ → HTMLブログ記事やLPへの表の埋め込みExcel・スプレッドシートからコピーした表をそのまま<table>タグに変換
HTMLテーブル → CSV他サイトの表データをExcelで集計カンマ区切りでセルのテキストのみを抽出
HTMLテーブル → TSVスプレッドシートへの直接貼り付けタブ区切りのため貼り付け時に列がそのまま展開される
HTMLテーブル → Markdown表GitHub・Notion・Qiitaでの表作成パイプ(|)区切りの一般的なMarkdownテーブル記法に変換

表データとHTMLテーブルを扱ううえで知っておきたいポイント

変換結果をきれいに保つための考え方と、用途別のフォーマットの選び方を解説します。

結論:表計算ソフトとHTML・Markdownは「区切り文字」の違いでしかない

Excelやスプレッドシートの表データは、コピーすると内部的にタブ区切り(TSV)のテキストとして扱われます。CSVはカンマ区切り、Markdown表はパイプ(|)区切りというように、見た目は違ってもすべて「行と区切り文字を持つテキスト」という点は共通です。
本ツールはこの区切り文字を変換の起点にすることで、表計算ソフト・HTML・Markdownの間をスムーズに行き来できるようにしています。

HTMLテーブルを貼り付けても崩れてしまう理由

多くのブログエディタやCMSでは、Excelの表をそのまま貼り付けると書式付きのテキストや画像として扱われ、正しい<table>タグには変換されません。
検索エンジンに表の構造を正しく認識してもらうためには、<table><thead><tbody>といった意味のあるHTML要素として表を記述することが重要です。

見出し行(ヘッダー)を正しく指定する重要性

表の1行目が項目名(見出し)である場合、HTML側では<thead>内の<th>要素として、Markdownでは区切り線(---)の直前の行として明示することで、表の構造がスクリーンリーダーや検索エンジンにも正しく伝わります。
本ツールの「1行目をヘッダーとして扱う」設定は、この構造化を自動で行うためのものです。

縞模様(ストライプ)や罫線は可読性のための装飾

行数の多い表では、1行おきに背景色を変える縞模様(ストライプ)を入れることで、読み手が横方向に目を滑らせやすくなり、誤読を防ぐ効果があります。
罫線の有無やセルの余白(コンパクト・ゆったり)も、表の情報量や掲載先のデザインに合わせて調整すると、読みやすさが大きく変わります。

よくある失敗と対策

Excelの表をそのままエディタに貼り付け、レイアウトが崩れる

Excelやスプレッドシートの表をブログエディタに直接貼り付けた結果、意図しない書式や余分な改行が入り、公開後にレイアウトが崩れてしまう失敗です。

💡 対策・解決策を見る
貼り付ける前に本ツールで表データをHTMLの<table>タグに変換し、生成されたコードをエディタのHTML編集モードに貼り付けることで、意図した構造のまま表を掲載できます。

結合セルを含む表を変換し、列数がずれてしまう

colspanやrowspanで結合されたセルを含むHTMLテーブルを変換した際、結合部分が1つのセルとして扱われるため、行によって列数が異なる出力になってしまう失敗です。

💡 対策・解決策を見る
変換後のプレビューで各行の列数が揃っているかを必ず確認し、ずれがある場合は元の表の結合を解除してから再度変換するか、該当箇所を手動で調整しましょう。

見出し行の設定を誤り、データ行がヘッダー扱いになる

「1行目をヘッダーとして扱う」の設定を確認せずに変換し、本来はデータであるはずの1行目が<th>要素やMarkdownの見出し行として出力されてしまう失敗です。

💡 対策・解決策を見る
変換前に入力データの1行目が本当に見出しかどうかを確認し、見出しがない表の場合は設定をオフにしてから変換しましょう。プレビューで見出し行の位置を必ず確認することも重要です。

生成したHTMLのスタイルが掲載先のデザインと衝突する

本ツールで生成したインラインスタイル付きのHTMLを、既にデザインが定義されたCMSのテーマにそのまま貼り付けた結果、色や余白がテーマ側のスタイルと衝突して見た目が崩れる失敗です。

💡 対策・解決策を見る
罫線・縞模様・余白などのオプションを掲載先のデザインに近い形に調整してから出力するか、掲載後にプレビューで見た目を確認し、必要に応じてCMS側のCSSで上書きしましょう。

よくある質問(FAQ)

Q.Excelやスプレッドシートの表をそのまま貼り付けても変換できますか

Q.

A. はい。ExcelやGoogleスプレッドシートで範囲選択してコピーした表は、タブ区切りのテキストとしてクリップボードにコピーされます。本ツールの入力欄にそのまま貼り付ければタブ区切りとして自動検出し、HTMLの<table>タグに変換します。カンマ区切りのCSVテキストにも対応しています。

Q.HTMLテーブルから表データを取り出すことはできますか

Q.

A. はい。「HTML→表データ」モードに切り替えて<table>タグを含むHTMLコードを貼り付けると、セルのテキストだけを抽出し、CSV・TSV・Markdown表のいずれかの形式に変換できます。TSV形式で出力すればExcelやスプレッドシートにそのまま貼り付けて表として展開できます。

Q.見出し行(ヘッダー)はどのように扱われますか

Q.

A. 「1行目をヘッダーとして扱う」を有効にすると、表データからHTMLへの変換では1行目が<thead>内の<th>要素として出力されます。HTMLから表データへの変換でもこの設定は反映され、Markdown表への変換時には見出し行として区切り線(---)が自動で挿入されます。

Q.生成したHTMLの見た目(罫線や縞模様)はカスタマイズできますか

Q.

A. はい。罫線の有無、見出し行の背景色、1行おきの縞模様(ストライプ)、セルの余白(コンパクト/ゆったり)、<thead><tbody>構造の有無をそれぞれオン・オフで切り替えられます。設定を変更すると、生成されるHTMLコードとプレビューがその場で更新されます。

Q.結合セル(colspan・rowspan)を含むHTMLテーブルは正しく変換できますか

Q.

A. セルの結合(colspan・rowspan)には対応しておらず、結合セルは1つのセルとしてテキストのみ抽出されるため、行や列の数がずれることがあります。結合セルを含む複雑な表を変換する場合は、変換後のプレビューで列数のずれがないかをご確認ください。

Q.入力した表データやHTMLコードが外部に送信される心配はありませんか

Q.

A. 一切ありません。本ツールはすべての変換処理をブラウザ内のJavaScriptだけで完結させる設計です。貼り付けた表データやHTMLコードがサーバーへ送信されたり保存されたりすることはなく、ページを閉じれば内容は消去されます。

Q.変換したHTMLコードやCSVデータをファイルとして保存できますか

Q.

A. はい。生成結果はコピーボタンでクリップボードにコピーできるほか、ダウンロードボタンからHTMLファイル(.html)やテキストファイル(.csv/.tsv/.md)としてそのまま保存することも可能です。

User Feedback & Request

あなたの声で、
このツールをより鋭く。

「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。

フィードバックを送る