WordPressのブロックエディタでテーブルの統合ができない時の対処法【複雑な表の作り方】

投稿日 2022年5月28日
著者浅賀理生(あさかまさお)
カテゴリー WordPress

テーブルブロックをHTMLで編集し「colspan」「rowspan」の要素を書き足しても表の統合ができない

今回はそのような悩みにお答えしていきます！

WordPress標準のブロックエディタ「Gutenberg（グーテンベルグ）」を用いれば、簡単かつ直感的に表（テーブル）を作ることができるので非常に便利なのですが、このテーブルブロックでは、HTMLに変換してソースコードに「colspan」「rowspan」のセルを統合する要素を書き足しても反映されず、表の統合ができないなど不便な点がいくつかあります。

WordPressに限ったことではないですが、静的ページにおいても表（テーブル）を用いて、情報を見やすくさせたいといったクライアントはまだまだ多いですので、本日はWordPressにおけるテーブルデザインについて解説していきます。

HTMLを直接編集して「colspan」「rowspan」などの要素を追加しても表（テーブル）が統合されない原因と対策

単純に「Gutenberg（グーテンベルグ）」のテーブルブロックでは、例え「HTMLとして編集」を選び、「colspan」「rowspan」などの要素を追加しても表（テーブル）が統合されない仕様になっています。（現時点では）

ですので、その解決策としては

「カスタムHTML」ブロックにて、HTMLを直接編集する
Advanced Editor Tools (旧名 TinyMCE Advanced)を使う

この2つのいずれかになります。

対策1「カスタムHTML」ブロックにて、HTMLを直接編集する

直感的にはテーブルのデザインを変えることはできませんが、私的にはHTMLを直接編集する方法が一番シンプルで後々問題になることも少ないと思うのでおすすめです。（問題とは、アップデートでプラグインが使用できなくなってしまうなどのリスク）

まずベースとなる表をテーブルブロックで作成し、そのブロックをHTMLとして編集でソースコードをコピー。そして、カスタムHTMLブロックに貼り付け、必要な要素を足していく（統合したければ「colspan」「rowspan」などの要素を追加）といった流れでも良いですし、HTMLテーブルを作成できるジェネレーターのようなものを使うのもアリだと思います。

HTMLテーブル作成サービスを使い、ソースコードを取得する

「テーブル html 作成」などで検索すると、無料で使用できるいくつかのHTMLテーブル作成サービスが出てきますので、使いやすいサービスを使ってみてください。

私的には右記のサイトが使いやすいと思いました。→https://tabletag.net/ja/

下記のスクリーンショットがUIですが、使い方はシンプルで直感的ですので、すぐに理解できると思います。

試しに下記のような表を作ってみます。

↓こんな感じの表を作りたい（エクセルで作りました）

↓先ほどのジェネレーターを使い同じ内容の表を作ってみました。

「カスタムHTML」ブロックにコピペ

	プラン1	プラン2	プラン3
料金	￥30,000	￥50,000	￥100,000
サポート	なし	あり

いかがですか？

綺麗に表示されていますし、統合もされているのがお分かりいただけると思います。

CSSで装飾

統合や分割など基本的な見せ方の問題はジェネレーターを使うか、もしくはテーブルに「colspan」「rowspan」などの要素を追加すれば良いのでさほど難しくはないのでは？と思いますが、「余白等を調整したい」「セルの背景色を変えたい」などの細かいデザインを施したい時は、CSSにてテーブルに装飾を施していく必要があります。

こちらもジェネレーターを使えば表示を確認しつつデザインできるので便利ですが、これをWordPressにて反映させる場合、WordPressのメニューより「外観」→「追加CSS」などに記載した上で、作成したテーブルにクラス名を付けて反映させる必要があるでしょう。

これは専門的な作業なので、もしサイト制作を制作会社に依頼しているのであれば制作会社に、自分では難しいのであればココナラ等のスポット作業を低価格で請け負ってくださるワーカーに依頼するのが良いと思います。