WordPressで表を作るなら『Flexible Table Block』プラグインがおすすめ

WordPressで表を挿入したい場合、標準では「テーブル」というブロックを使って作成します。

しかし、この標準のテーブルブロックは、設定できる内容も少なく、なかなか思い通りの表が作れません。

そこで、細かい設定が可能なテーブル作成プラグイン『Flexible Table Block』を使って、思い通りの表を作成しましょう。

Flexible Table Blockプラグインをインストールしよう

WordPressの管理画面から「プラグイン→新規追加」を選んで、右上の検索窓に「flexible table」などと入力して検索しましょう。図のプラグインが見つかったらインストールして有効化します。

Felxible Table Blockプラグインで表を作ろう

それでは、投稿や固定ページを作成してブロックを挿入しましょう。図の「Flexible Table」というブロックが挿入できるのでこれを選びます。すると、行数と列数を入力できるようになるのでこれを入力して表を作成しましょう。なお、行や列は後からでも追加できます。

各セルの編集は、実際にエディター画面に展開されるテーブルに挿入して作成でき、非常に直感的です。カーソルキーの上下左右で、編集するセルを移動することもできます。(Excelなどで利用できるTabキーは利用できないので注意しましょう)

また、行や列の削除には表の外側にあるボタンをクリックして、行や列を選択するとゴミ箱のアイコンが表示されるので、これをクリックするだけで削除でき、直感的です。

非常に豊富な設定項目

Flexible Table Blockプラグインの魅力は、豊富な設定項目です。右上の「設定」ボタンをクリックしてパネルを表示しましょう。

ストライプテーブルにしたりなど、標準のブロックで可能な設定はもちろんのこと、セルごとの設定や複数のセルを選択しての一括の設定なども可能です。

設定できる内容には次のようなものがあります。

  • フォントサイズ・行の高さ
  • テキスト色・背景色
  • テーブルの横幅・最大幅・最小幅
  • パディング、ボーダースタイル、ボーダー色
  • 角丸
  • セルの枠線を分割するか、1本にするか
  • キャプションのフォントサイズや行の高さなど

Ctrlキー(Cmdキー)を押しながらセルを選択したり、Shiftキーを押しながら範囲を選択すると複数のセルを選ぶことができます。この状態で、スタイルを一気に調整したり、セルの結合なども行えます。

グローバル設定で全体を設定しよう

設定を確認する際、先に「グローバル設定」ボタンで全体の設定をしておくとよいでしょう。この設定によって、個別の設定がうまく反映されないことがあります。

特に、グローバル設定の標準では「セルの背景色」が「白」に設定されています。これにより、テーブルの背景色を変更しても、セルの背景色はそのままでは変わりません。例えば、黒背景のテーブルを作成したいときなどは、グローバル設定で「クリア」に設定しておきましょう。

レスポンシブ対応

表は、スマホ表示の時に見にくくなってしまいがちなのが悩みどころですが、Flexible Tableはレスポンシブ表示にも対応しています。

テールの幅を設定して縮まないようにした上で、「モバイル表示でスクロールする」というチェックを入れると、横幅がはみ出た場合に横スクロールを表示させることができます(PCでも可能)。

また、「モバイルでは縦に並べる」というチェックもあり、表を通常のリスト形式で表示させることもできます。

さらには、ヘッダー行の固定表示なども可能なため、非常に見やすいテーブルを作成できます。

現状、表作成プラグインの決定版とも言うべきプラグイン。是非利用してみてください。

この記事を書いた人

谷口 允(たにぐち まこと)

エイチツーオー・スペース代表。関連会社でオンライン教育コンテンツ制作会社「ともすた」代表も勤める。

「ウェブをちゃんと」をテーマに、ウェブや動画を「ちゃんと」活用するためのアドバイスなどを行う。
主な著書に「よくわかるPHPの教科書」や、「マンガでざっくり学ぶプログラミング(監修)」など。