WordPressの記事の中でテーブル表（table）を作るには、WordPressのデフォルトエディタである「グーテンベルク」や「ビジュアルエディタ」でできます。
他にはプラグインを使って作成する方法もあります。テーブル作成用のWordPressプラグインで有名なのは「TablePress」ですね。
当記事ではグーテンベルクエディタでテーブル作成する方法だけを解説しています。
目次
WordPressで表を作成する方法【プラグインなし】
ブロックエディタ（グーテンベルク）の「テーブル（表）機能」を利用し、表作成をします。グーテンベルク（Gutenberg）エディタの使い方に関してはこちらをご覧ください。
WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わ...
表の完成までの流れ
今回はこちらの見本をグーテンベルクエディタで作成します。
| サービス | 料金 | 利用範囲 |
| プランA | 980円 | 市内 |
| プランB | 1,980円 | 県内 |
| プランC | 4,980円 | 全国 |
なお、HTMLで書くとこうなります。
<table border="1" style="width: 100%; text-align:center;">
<tbody>
<tr>
<td style="width: 33.3333%; font-weight:bold; border-bottom: solid 2px;">サービス</td>
<td style="width: 33.3333%; font-weight:bold; border-bottom: solid 2px;">料金</td>
<td style="width: 33.3333%; font-weight:bold; border-bottom: solid 2px;">利用範囲</td>
</tr>
<tr>
<td style="width: 33.3333%; background-color:#f5f5f5;">プランA</td>
<td style="width: 33.3333%; background-color:#f5f5f5;">980円</td>
<td style="width: 33.3333%; background-color:#f5f5f5;">市内</td>
</tr>
<tr>
<td style="width: 33.3333%;">プランB</td>
<td style="width: 33.3333%;">1,980円</td>
<td style="width: 33.3333%;">県内</td>
</tr>
<tr>
<td style="width: 33.3333%; background-color:#f5f5f5;">プランC</td>
<td style="width: 33.3333%; background-color:#f5f5f5;">4,980円</td>
<td style="width: 33.3333%; background-color:#f5f5f5;">全国</td>
</tr>
</tbody>
</table>ブロック追加 → テーブル作成
まず「ブロックの追加」>「テーブル」を選択します。ブロック一覧にテーブルの表示がない場合は、「すべてを表示」をクリックして、下にスクロールすれば見つかります。
次に、列数（カラム数）と行数の設定。モデルのテーブルは3列3行なので、それぞれ3に設定して「表を作成」をクリックしてください。
「スタイル」と「ヘッダーラベル」の設定
次に、表のスタイルとヘッダーラベルの設定をします。画面右上にある歯車マークをクリックし設定画面を表示させ、スタイルを「ストライプ」に、ヘッダーセクションをONに切り替えてください。
表に情報を入力
最後に、表内へ情報を入力し、「テキストの配置を変更」>「カラムを中央配置」から、テキストを中央寄せにします。
覚えておくと便利な機能
テーブル作成において、覚えておくと便利な機能をいくつかご紹介します。
表に画像を表示する
表の中に任意の画像を追加できます。追加したい箇所で「続きを読む」>「インライン画像」を選択し、追加したい画像をアップロードします。
下記のようにテーブル内に画像が表示されていればOKです。
色付け【テキスト・背景色】
テキストと背景を任意の色に設定できます（特定セルのみの色変更はできません）。色付けしたい表を選択し、「色」をクリックしてください。
テキスト色側の「①カスタムカラー」をクリックし、「②」のゲージで好きな色味に合わせ、「③」で色の明度と彩度を調節すれば、任意のテキスト色に変更できます。
背景色側の「①カスタムカラー」をクリックし、「②」のゲージで好きな色味に合わせ、「③」で色の明度と彩度を調節すれば、任意の背景色に変更できます。
セル幅の固定
表に記載するテキスト量により変動するセル幅を固定できます。セル幅を固定したい表を選択し、「表の設定」>「表のセル幅を固定」をONにしてください。
バラバラだったセル幅が均一化し、バランスのよい見た目になりました。
フッターセクションの設定
表にフッターを設定します。「表の設定」にある「フッターセクション」をONにしてください。
すると下記のように、フッターラベルが表示されます。ヘッダーと同じ背景色をつけるなどすれば、縦に長いテーブルを作る際に役立ちそうです。
まとめと注意点
WordPressのエディタ（ブロック＆ビジュアルエディタ）を使うと、簡単にテーブル表を作成・編集できます。ただ、一方でスマホでテーブルを見ると、デザインが崩れたり、横幅が狭すぎて文章が読みにくくなることもあります。
スマホの実機か、GoogleChromeのデベロッパーツールでチェックしましょう。デベロッパーツールは、ブラウザを右クリック→「検証」で開けます。
テーブルのコードを手書きで書きたい方はこちらの記事をどうぞ。
WordPressは、投稿エディタでテーブル（table）が直感的に作成できます。 WordPressは直感的にテーブルが作成できる。 ただ、標準的なテーブルは作成できますが、例外的なテーブルの作成には向いていません。 見やすくて綺麗なテーブルにしようと思うと、どうしてもHTM...
コメント