WordPressの記事の中でテーブル表(table)を作るには、WordPressのデフォルトエディタである「グーテンベルク」や「ビジュアルエディタ」でできます。

他にはプラグインを使って作成する方法もあります。テーブル作成用のWordPressプラグインで有名なのは「TablePress」ですね。

当記事ではグーテンベルクエディタでテーブル作成する方法だけを解説しています。

WordPressで表を作成する方法【プラグインなし】

ブロックエディタ(グーテンベルク)の「テーブル(表)機能」を利用し、表作成をします。グーテンベルク(Gutenberg)エディタの使い方に関してはこちらをご覧ください。

表の完成までの流れ

今回はこちらの見本をグーテンベルクエディタで作成します。

サービス 料金 利用範囲
プランA 980円 市内
プランB 1,980円 県内
プランC 4,980円 全国
テーブルのデザインはWordPressテーマに入っているCSSによって変わるため、必ずしも上記と同じデザインになるわけではありません。微調整にはHTMLとCSSをカスタマイズしていく必要があります。

なお、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に設定して「表を作成」をクリックしてください。

WordPressで表を作る方法

「スタイル」と「ヘッダーラベル」の設定

次に、表のスタイルとヘッダーラベルの設定をします。画面右上にある歯車マークをクリックし設定画面を表示させ、スタイルを「ストライプ」に、ヘッダーセクションをONに切り替えてください。

ラベル作成

表に情報を入力

最後に、表内へ情報を入力し、「テキストの配置を変更」>「カラムを中央配置」から、テキストを中央寄せにします。
文字を中央寄せ

覚えておくと便利な機能

テーブル作成において、覚えておくと便利な機能をいくつかご紹介します。

表に画像を表示する

表の中に任意の画像を追加できます。追加したい箇所で「続きを読む」>「インライン画像」を選択し、追加したい画像をアップロードします。

テーブルに画像を表示

下記のようにテーブル内に画像が表示されていればOKです。
テーブル内に画像を表示する

色付け【テキスト・背景色】

テキストと背景を任意の色に設定できます(特定セルのみの色変更はできません)。色付けしたい表を選択し、「色」をクリックしてください。
テーブル色の変更

テキスト色側の「①カスタムカラー」をクリックし、「②」のゲージで好きな色味に合わせ、「③」で色の明度と彩度を調節すれば、任意のテキスト色に変更できます。
テーブルの背景色変更

背景色側の「①カスタムカラー」をクリックし、「②」のゲージで好きな色味に合わせ、「③」で色の明度と彩度を調節すれば、任意の背景色に変更できます。
テーブルの枠の色変更

セル幅の固定

表に記載するテキスト量により変動するセル幅を固定できます。セル幅を固定したい表を選択し、「表の設定」>「表のセル幅を固定」をONにしてください。
テーブルのセル幅変更

バラバラだったセル幅が均一化し、バランスのよい見た目になりました。
セル幅変更

フッターセクションの設定

表にフッターを設定します。「表の設定」にある「フッターセクション」をONにしてください。
表にフッター追加

すると下記のように、フッターラベルが表示されます。ヘッダーと同じ背景色をつけるなどすれば、縦に長いテーブルを作る際に役立ちそうです。
テーブルのフッター

まとめと注意点

WordPressのエディタ(ブロック&ビジュアルエディタ)を使えば、簡単にテーブル表をカスタマイズできます。ただ、一方でスマホでテーブルを見ると、デザインが崩れたり、横幅が狭すぎて文章が読みにくくなることもあります。

スマホの実機でチェックするか、GoogleChromeのデベロッパーツールでのチェックは必須です。Chromeのデベロッパーツールは、ブラウザを右クリック→「検証」で開くことができます。詳しい使い方はこちらの記事をどうぞ。

また、テーブルを作成する専用のWordPressプラグインもあります。その中でも有名なのが「TablePress」というプラグインで、表のソート機能や CSVやエクセルファイルから入力ができたりします。機能面を優先したい場合は、プラグインもありです。