【WordPressテーブルブロック】表のセルを結合する方法まとめ

テーブルブロックセルを結合する方法まとめ

WordPressのテーブルブロックで、表のセルを結合する方法をまとめています。

ブログや会社ホームページを運用していると表を利用する機会が多いと思いますが、セルの結合を覚えれば表現力がグッと上がります。ぜひマスターしましょう。

動作確認環境
  • WordPress: 6.4.1
目次

テーブルブロックのセルを結合した例

次の画像が表のセルを結合した例です。1行目の「 第1クォーター」のテキストは、3列横並びのセルを結合して表示しています。

テーブルブロックのセルを結合した例
テーブルブロックのセルを結合した例

エクセルやプレゼン資料なんかでよく見る表の形式ですよね。WordPressでは表のセルを結合するには主に次の2つの方法があります。

No方法対象メリット
1HTMLを編集する方法中級者プラグインが不要
2プラグインを使用する方法初心者直感的で簡単
テーブルブロックのセルを結合する2つの方法を比較

HTMLを編集する方は少し難易度は高いですが、要点さえ理解すれば簡単です。少しでもプラグインの導入を減らしたい場合は、HTMLの編集がオススメです。

ブログやホームページの表は画像として貼り付けてもいい?

よほど複雑な場合を除いて、コーディング(テーブルブロック)で作成した方がよいでしょう。画像で表を挿入すると、SEO的な効果があまり期待できないのと、スマホで表示すると中の文字が極端に小さくなり視認性が悪くなります。特別な理由がない限り、ブロックで作成しましょう。

HTMLを編集する方法

まずはHTML編集の方法を、ステップに分けて解説していきます。

STEP
テーブルブロックを挿入する

ブロック選択時に「/テーブル」と入力すると、ショートカットでテーブルブロックを入れることができます。

テーブルブロック挿入のショートカット

カラム数4列、行数4行のテーブルを作成してみました。テキストはそれっぽいものを入れています。当然ながらまだセルの結合はできていません。

セル結合前のテーブル

ここから「第1クォーター」のセルを、右隣の2つの空白セルと結合したいと思います。

STEP
HTML編集モードに切り替える

テーブルブロックを選択した状態で、3点リーダーをクリックし、「HTMLとして編集」を選択します。

HTML編集モードへの切り替え

するとコードが表示されます。これがHTMLです。

テーブルブロックのHTML
STEP
HTMLを編集する

今回は「第一クォーター」を含む右隣のセルを3つ結合したいので、「第一クォーター」の<td>タグにcolspan="3"を追加します。そして「第一クォーター」の右隣の2つの<td>は不要なので、閉じタグとともに削除します。

次のコードでは該当箇所を変更前後で比較しています。

変更前のコード

<tr><td></td><td>第1クォーター</td><td></td><td></td></tr><tr>

変更後のコード

<tr><td></td><td colspan="3">第1クォーター</td></tr>

この状態で再び3点リーダーをクリックし、「ビジュアル編集」を選択します。するとブロックがビジュアルモードに戻り、セルが結合されていることがわかります。

セル結合後のテーブルブロック

このままだと少しカッコ悪いので、「カラムを中央配置」をクリックして結合したセルの中のテキストを中央に寄せておきましょう。

以上でセルの結合は終了です。保存して公開を押すと、記事画面に反映されます。

 今回は横方向のセルの結合を例にしましたが、縦方向に結合したい場合は、同じように<td>タグにrowspan="3"を使用すればOKです。「3」の数字のところには結合したいセルの数が入ります。

<td>タグの他に<th>タグでも、同じ方法でセルの結合が可能です。

プラグインを使用する方法

次にプラグインを使用してテーブルブロックのセルを結合する方法です。「Flexible Table Block」というプラグインを使用します。

STEP
プラグインをインストールする

「新規プラグインを追加」をクリックし、検索窓に「Flexible Table Block」と入力します。該当のプラグインを確認し、今すぐインストールして有効化を行います。

プラグインFlexible Table Blockをインストール
STEP
Flexible Tableブロックを挿入する

プラグインFlexible Table Blockを有効化すると、ブロックエディタの選択画面でFlexible Tableブロックを使用することができるようになります。

ブロック選択画面で「/Flexible Table」と入力すると、ショートカットでブロックを挿入することができます。

Flexible Table Block挿入のショートカット

カラム数4列、行数4行のテーブルを作成してみました。こちらでもテキストはそれっぽいものを入れてみました。まだセルは結合されていません。

セル結合前のFlexible Table Block
STEP
セルを結合する

テーブルブロックを選択した状態で、shiftを押しながら結合したいセルを選択します。セルが青枠で囲われていたら、正しく選択できている状態です。

Flexible Table Blockで結合したいセルを選択

その状態で「テーブルの編集」、「セルの結合」の順にクリックするとセルが結合されます。

Flexible Table Blockでのセルの結合方法

セルの中のテキストを中央寄せにする場合は、セルを選択した状態でサイドメニューの「セル設定」>「セルの配置」で、中央揃えを選択すればOKです。

以上でセルの結合は終了です。保存して公開を押すと、記事画面に反映されます。

Flexible Table Blockを使用するとセルの結合以外にも、テーブルの横幅やセル内の余白、ボーダーの幅の設定などその他に様々なことが可能です。

最後に

テーブルブロックのセルを結合する方法として、HTMLを編集する方法と、プラグインを使用する方法をご紹介しました。

少し手間はかかりますが、どちらかの方法を使用して見栄えの良いおしゃれなテーブルを作ってみましょう。

どちらの方法も面倒だという方やテーブルの使用頻度が多い方には、WordPressテーマのSWELLをオススメします。SWELLではデフォルトで、テーブルブロックのセル結合機能が実装されています。

Flexible Table Blockの時と同じように、視覚的にわかりやすく初心者でも簡単にセルの結合ができます。

SWELLでテーブルブロックを結合する様子

セル結合の他に、SWELLでは次のようなテーブルに関する機能を使用できます。

SWELLのテーブル機能
  • セルの幅を固定
  • 横スクロールの指定(デバイス毎に設定可能)
  • PCではセルを横並びに、スマホではセルを縦並びに設定

ブログの運営でテーブルを駆使しているという方はぜひ一度使ってみてください。

>>SWELLの購入方法とインストール手順の解説はこちら

目次