【WordPress】HTML知識不要！初心者でも簡単にセルの結合を含んだ複雑な表を作成する方法

ワードプレスで表を作成する場合、

といった方法で簡単な表ならさくっと挿入できちゃいます。

しかし、セルを結合して見やすい表を作りたいと思うと、上の方法では対応できないんです。見やすい表を作成するうえで、セルの結合って結構重要だと思うんですけどね～。

そこで今回は、HTML知識ゼロのゆずぽんが、調べに調べぬいて編み出した「他力本願だけど複雑な表を簡単に作成する方法」を紹介していきたいと思います。

この技さえ覚えてしまえば下のような複雑な表もあっというまに作ることが可能なんです！

基本的な作り方から学ぶ

複雑な表の作成をする前に、まずは基本的な表の作り方から紹介します。

セルの結合などの必要がない場合は、以下の方法で簡単に作成可能です。

WordPressの表作成機能を使う

まずは一番基本的な機能から。

ワードプレスには表を作成する機能が実装されています。

ブロックエディターの【フォーマット】⇒【表】で作成が可能です。

最初に行数や列数を指定してから表を作成していくのですが、行や列の追加・削除はあとから編集できますので、だいたいで大丈夫です。

表の編集は行や列の追加・削除のほか、セル内改行、中央寄せ、文字列に色をつけるなどの基本的な書式設定は可能ですが、セルごとに色をつける・セルを結合するといったような複雑なセルの操作はできません。

Excelで作った表をコピペする

ゆずぽんがそうなんですけど・・・

ブロックエディターで作るって、何となくわかりにくいといいますか・・・先が見えないといいますか・・・表作成はExcelってイメージが強く・・・

ゆずぽんと同じように

という方にオススメなのは、エクセルで作成した表をコピペする方法です。

手順は簡単！エクセルで作成した表をコピーし、【段落ブロック】にペーストするだけで、表を自動的に読み込んでくれます。

ただこの方法だと、表形式ではなくテキストだけペーストされてしまうことがありまして・・・不具合なのかな～～

そんな時はブロックを【クラシック】にしてコピペするとうまくいきますよ～。

このExcelで作成した表をコピペする方法ですが、実は万能ではなくいくつかの注意点があります。

コピペの場合も、セルの操作はできないということです（書式は後から編集可能）

と、以上が基本的な表の作成方法です。

セルの結合が必要な複雑な表でなければ、上記のどちらかの方法で十分かな～と思います。

Webツールを使って複雑な表を作成する。

ここからが本題です。

上記の基本的な表作成ではどうやってもセルの結合は簡単にできません。コードの知識がないとセル結合には太刀打ちできないんですよね～。

で、いろいろ調べた結果、とても良いWebツールを発見しました。

Excelで作成した表をHTMLに自動変換してくれるWebツールです。

Excel⇒HTML変換のWebツールはいくつかあるのですが、いろいろ試した結果、ゆずぽんがおすすめするのは【WEB上で一発変換|EXCEL表→HTML変換ツール】です！

https://antenanet.oboegaki.net/exceltohtml/

このWebツールの凄いところは、見出しタグの行列数の指定や、セルの結合や中央寄せ、セル内改行などの細かい設定をHTMLに変換してくれるので、HTMLやCSSの知識がなくても簡単に複雑な表が作成できるところです。

ゆずぽん的に特別ありがたいな～と思ったのが下の2つの機能ですね。

この二つは基本的な表の作り方ではどうにもならない部分なので、本当に助かっています。

使い方はページ内に全て書かれているので簡単で・・・

見出しの数を設定したら、エクセルの表をコピー⇒黄色枠の文字を右クリックし貼り付けるだけです。

すると・・・

HTMLコードと出力イメージが表示されるので、HTMLコードをワードプレスに貼り付けるだけでOKです。

WordPressにHTMLを貼り付けるときの注意点ですが・・・

【カスタムHTML】に貼り付けてしまうと、プレビューで表を確認することはできても細かい書式の編集ができません。書式の編集をする場合は、スタイルコードを記述することになり、HTMLの知識が必要になります。

それに対し、【クラシック】からHTMLを貼り付けると、画面上は表が表示されるので、中央寄せやフォント色・サイズなどの書式設定が可能になります。

まとめ

いかがでしょうか。

基本的な表作成からセルの結合のような複雑な表まで、コードの知識がなくても作れる方法をご紹介しました。

HTMLが苦手な方でも簡単にきれいな表が作成できるようになりますので、是非一度お試しください。