Excelの表をHTMLのテーブルに変換する方法｜コピーして貼るだけの手順とスマホ対応

料金表や比較表をExcelで作ってあって、それをサイトに載せたいことがあります。

HTMLのtableタグを1マスずつ手で打つのは手間がかかり、打ち間違いも起きます。

この記事では、Excelやスプレッドシートの表をコピーして貼るだけでHTMLのテーブルに変換する方法と、WordPressへの載せ方、スマホで表が切れないようにする方法を紹介します。

この記事で使うExcel表→HTMLテーブル変換は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。

無料で、会員登録なしで使えます。

最終確認日：2026年9月28日

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

この記事で分かること

• Excelの表をHTMLのテーブルに変換する手順
• WordPressのテーブルブロックとの使い分け
• 見出しのセル・class・横スクロールの付け方
• うまく変換できない表と、その直し方

WEBツール箱

Excel表をHTMLに変換｜表タグを無料で自動生成 ExcelやGoogleスプレッドシートの表をコピーして貼るだけでHTMLのテーブルタグに変換します。Markdown表や横スクロール対応にも対応。ブラウザ内で完結するので内容は送信…

答え｜WordPressならまずテーブルブロックに貼る

WordPressのブロックエディターの「テーブル」ブロックには、Excelでコピーした表をそのまま貼り付けられます。

表を載せるだけなら、HTMLに変換する必要はありません。

HTMLやMarkdownに変換したいときに使うのが、ここで紹介するツールです。

ツールで変換する｜コピーして貼るだけ

1. Excelやスプレッドシートで、表の範囲を選んでコピーする
2. Excel表→HTMLテーブル変換を開き、入力欄に貼る
3. 「出力形式」と見出しなどのオプションを選ぶ
4. 変換結果の「コピー」を押して、使う場所に貼る

貼った時点で変換されるので、変換のボタンはありません。

Excelからコピーした表は、セルがタブで区切られた文字として貼り付けられるので、そのまま変換できます。

ファビコンの大きさをまとめた4行×3列の表を、最初の設定のまま変換した結果です。

1行目は見出しのセル（th）になり、thead と tbody に分けて出力されました。

見出しのセルには、列の見出しであることを示す scope=”col” が付いています。

下の「表示プレビュー」で、表として正しく分かれているかを確かめられます。

オプションで変わるところ

「1列目も見出し」「class（size-table）」「横スクロール」の3つを入れて、2列の表を変換すると次のようになります。

<div style="overflow-x:auto">
  <table class="size-table">
    <thead>
      <tr>
        <th scope="col">大きさ</th>
        <th scope="col">使われる場所</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">16px</th>
        <td>ブラウザのタブ</td>
      </tr>
    </tbody>
  </table>
</div>

実際の出力はタブで字下げされますが、ここでは幅を抑えるために空白2つに置き換え、途中の行を省いています。

出力形式をMarkdown表にすると、次の形になります。

| 大きさ | 使われる場所 |
| --- | --- |
| 16px | ブラウザのタブ |
| 180px | iPhoneのホーム画面 |

1列目も見出しにするのはどんなとき？

左端の列で行の意味が決まる表のときです。

例えば、左端にプラン名、上に比べる項目が並ぶ比較表がこれに当たります。

左端をth scope=”row”にすると、単純な表で行見出しとの関係を伝えやすくなります。複雑な結合セルでは追加の関連付けが必要になることがあり、実際の読み上げも確認します。

WordPressに載せる

1. 変換結果をコピーする
2. 記事の中に「カスタムHTML」ブロックを追加する
3. コピーしたHTMLを貼り付ける
4. 「プレビュー」のタブで表示を確かめる

classを付けた場合は、「外観」→「カスタマイズ」→「追加CSS」などに、そのclassのCSSを書きます。

カスタムHTMLブロックの中身は、後からブロックエディターの表の機能では編集できないので、直すときはHTMLを書き換えるか、変換し直して貼り替えます。

並び替えや絞り込み検索ができる表にしたい場合は、「TablePressで表を作成する方法」が参考になります。

SWELLの表で左の列を固定したい場合は、「SWELLのテーブルの2列目も固定にする方法」で解説しています。

スマホで表が切れるときは横スクロールにする

列の多い表は、スマホの画面の幅に収まりません。

そのまま載せると、表がはみ出してページ全体が横に動いてしまい、読みにくくなります。

「横スクロール用のdivで囲む」にチェックを入れると、overflow-x:auto を指定した div で表を包みます。

表がコンテナーより広い場合、表の部分を横にスクロールできます。テーマの折り返し指定によっては幅が収まることもあるため、公開画面で指とキーボードによる操作を確認します。

うまく変換できない表と直し方

ツールは、1行目にタブがあればタブ区切り、無ければカンマ区切りとして読みます。

CSVの引用符も解釈し、引用符で囲まれたセルは、中にカンマや改行があっても1つのセルとして読みます。

引っかかりやすい表を、2026年9月28日に実際に貼って確かめました。

CSVのファイルでは、カンマを含むセルが引用符で囲まれているかを確かめてから貼ってください。

Excelの画面から直接コピーすればタブ区切りになるので、金額のカンマを気にせずに済みます。

セルの中の改行は、HTMLではそのままだと空白として表示されます。

改行して見せたいときは、変換した後のHTMLで、その場所に改行のタグを書き足します。

ほかにも、次のものは変換されません。

• 結合したセル（rowspan・colspanは付かない）
• 文字の色・太字・背景色などの書式
• セルの中のリンク

変換されるのは文字だけなので、書式は変換後にCSSで付けます。

ツールを使わずに変換する

Excelには、「名前を付けて保存」で「Webページ」の形式を選んで、表をHTMLのファイルとして書き出す機能があります。

ただし、Excelの見た目を再現するための書式の記述が大量に付くため、記事に貼るには不要な部分を消す手間がかかります。

記事に貼るための短いHTMLが欲しいなら、ツールで変換するほうが早く済みます。

ツールの限界

• 区切り文字はタブとカンマだけで、引用符で囲まれていないカンマはセルの区切りとして読む
• 結合したセルと書式は変換されず、セル内の改行は改行のタグにならない
• 行ごとにセルの数がそろっているかは確かめない
• HTMLから表を作る逆向きの変換はできない

よくある質問

Q. 貼った表の数字はどこかに送られますか？

送られません。

変換処理はブラウザー内で行う設計です。ただしページ全体や拡張機能の通信まで保証する説明ではありません。個人情報や機密情報を含む表は、架空の値に置き換えて確認してください。

Q. Googleスプレッドシートの表でも使えますか？

使えます。

スプレッドシートでコピーした表も、タブ区切りで貼り付けられます。

Q. 表の中の「&」や「<」はどうなりますか？

セルの中の文字は、ツールがエスケープしてから出力します。

「A&B」は「A&amp;B」に変換されるので、そのまま貼っても表示は崩れません。

文字のエスケープについてはHTML特殊文字変換でも確かめられます。

まとめ

• WordPressに表を載せるだけなら、テーブルブロックにExcelから直接貼る
• HTMLやMarkdownが要るときはExcel表→HTMLテーブル変換に貼るだけで変換できる
• 左端で行の意味が決まる表は、1列目も見出しにする
• スマホで切れる表は、横スクロール用のdivで囲む
• CSVを貼るときは、カンマを含むセルを引用符で囲む（Excelから直接コピーすれば気にしなくてよい）

WEBツール箱

Excel表をHTMLに変換｜表タグを無料で自動生成 ExcelやGoogleスプレッドシートの表をコピーして貼るだけでHTMLのテーブルタグに変換します。Markdown表や横スクロール対応にも対応。ブラウザ内で完結するので内容は送信…

HTMLの特殊文字の扱いは、「HTMLの特殊文字をエスケープする方法」で解説しています。

ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。

ツールの一覧はWEBツール箱にあります。