
ExcelやGoogleスプレッドシートにまとめた表をWordPressに載せたい時があるかと思います。
そんな時はWEBサービス「Excel to HTML」を使うと、WordPressで表を綺麗に表示できます。
「Excel to HTML」を使用する手順
こちらのExcelのダミーデータを使って書きます。
Googleスプレッドシートを使用する場合でも同じ手順で作業してください。

補足
今回のダミーデータは「hogehoge.tk」の疑似個人情報生成で作りました。
Excelの表をコピーする
Excelで作った表を範囲選択肢、コピーします。

「Excel to HTML」に貼り付ける
「Excel to HTML」を開き「2 変換したいExcel表を貼り付けます」のテキストエリアにコピーした表を貼り付けます。

「1 見出し行や見出し列を含む表にするか選びます」では、今回は
- 連番や氏名などの見出しがある
- 数字が割り振られている
ため、「見出し「行」と見出し「列」が必要」を選びました。
表の状態によって使い分けてみてください。

設定ができたら「変換する」をクリックします。
これでWordPressに貼り付けられる形(HTML)に変換できました。

変換されたHTMLをコピーする
「3 変換ボタンをクリック」の上に変換されたHTMLが出てきました。

こちらを全て選択し、コピーします。

Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿に貼り付ける
Excel to HTMLで変換したテーブルをWordPressの固定ページや投稿のお好きなところに貼り付けます。

ブロックエディタとクラシックエディタの両方のケースを紹介していますが、ブロックエディタの方が楽にできますよ。
ブロックエディター(Gutenberg)の場合
編集画面を開き、貼り付けたい場所をクリックします。

ペーストすると自動的にテーブルブロックに変換され、このような表になりました。

旧エディター(クラシックエディター)の場合
編集画面を開き、

テキストタブに切り替えます。

先ほどコピーしたHTMLを貼り付けます。

ビジュアルタブに切り替えると

このように表になりました。

プレビューや公開後に表画面でテーブルを見てみる
実際に表画面で見てみると、PCではこのように表示されました。

スマホで見せたい場合はご注意!
今回の例のように表の項目が多いと、PCでは見やすくてもスマホでは見えにくい場合があります。

もしWordPressで表を見せることを前提にしてExcelなどでデータを作る場合、
- WordPressの画面で横スクロールをできるようにする(難易度:高)
- 項目を減らす(難易度:低)
など工夫が必要です。
ブロックエディターの場合も旧エディターの場合もこの点をご注意ください。
ホームページの新規作成・リニューアルで
お困りの担当者様へ

WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか?
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。