Excel → HTMLテーブル(table)自動変換ツール

Excelやスプレッドシートのセルをコピーして貼り付けるだけで、Web用の安全でクリーンな

タグを一瞬で生成します。
Excel特有の余計なスタイル（レイアウトがずれる原因）を排除し、実務ですぐに使えるレスポンシブ対応のテーブルを作成できます。

📊 1. データの貼り付け
見出しオプション：

📄 生成されたHTML

変換結果がここに表示されます

このツールの使い方と注意点

  1. ExcelやGoogleスプレッドシートで、表の範囲を選択してコピー（Ctrl+C）します。
  2. 本ツールの入力エリアに貼り付け（Ctrl+V）ます。
  3. 見出し（<th>）にしたい行・列があれば、チェックボックスで指定します。
  4. 生成されたHTMLをコピーして、エディタに貼り付けます。
  • ⚠️ セルの結合（colspan / rowspan）について
    Excel上でセルを結合していても、コピーしたテキストデータには結合情報が含まれないため、自動で colspan や rowspan には変換されません。結合が必要な場合は、生成後のHTMLを直接編集してください。
  • ⚠️ セル内の改行（Alt+Enter）について
    セルの中で改行をしている場合、ツールが「新しい行の始まり」と誤認して表が崩れることがあります。なるべくセル内改行のないデータを貼り付けてください。

📱 スマホ表示の際の調整アドバイス

<table> タグは画面幅が狭いスマートフォンと非常に相性が悪く、そのまま表示すると文字が縦に細長く潰れたり、画面外にはみ出してレイアウトが崩れたりします。スマホ対応では以下のいずれかのアプローチを検討してください。

① 縦積み（ブロック化）にする
会社概要や店舗情報など、「左が見出し（th）、右が内容（td）」というシンプルな2列の表であれば、CSSのメディアクエリ（@media）を使って th, td { display: block; width: 100%; } と指定し、上下に並び替えるのが最も読みやすいです。
② はみ出す部分を横スクロールさせる
料金表や比較スペック表など「列数が3列以上あり、縦積みすると表の意味が通じなくなる」データの場合は、表全体を div で囲んで横スクロールさせる手法（下記参照）が有効です。

↔️ スマホで横スクロールさせるカスタマイズ手法

横スクロールを実装する場合は、テーブルを囲む親要素（ラッパー）を作り、そこにCSSをあてるのが鉄則です。
ただし、意味もなく何でも横スクロールにするとユーザーの閲覧ストレスになるため、「列数が多くてどうしても横幅が必要なデータ」に絞って使用しましょう。

1. HTMLの準備（テーブルをdivで囲む）

<div class="table-scroll">
  <table>
    <!-- 生成されたテーブルの中身 -->
  </table>
</div>

2. CSSの記述

/* テーブルを囲む親要素 */
.table-scroll {
  overflow-x: auto; /* はみ出した場合のみスクロールバーを表示 */
  -webkit-overflow-scrolling: touch; /* iOS端末で滑らかにスクロールさせる */
  margin-bottom: 20px;
}

/* スクロールを強制するための設定 */
.table-scroll table {
  width: 100%;
  min-width: 600px; /* ここが重要！表が潰れない最低幅を指定する */
  /* white-space: nowrap; /* ←セル内で文字を改行させたくない場合はコメントを外す */
}