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

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

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

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

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

2019.06.25

2021.12.22

WordPressのブロックエディタ「Gutenberg（グーテンベルグ）」の使い方解説

WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わ...

表の完成までの流れ

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

サービス 料金 利用範囲
プラン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のデベロッパーツールでチェックしましょう。デベロッパーツールは、ブラウザを右クリック→「検証」で開けます。

テーブルのコードを手書きで書きたい方はこちらの記事をどうぞ。

2022.04.22

2022.10.06

ブログで使えるテーブル（table）のHTMLコード例

WordPressは、投稿画面のエディタ（ブロック＆ビジュアル）でテーブル（table）が作成できます。 ただ、複雑なテーブルをつくろうとすると、CSSを指定しないといけないので逆に手順がややこしくなるように感じるんですよね。例えば、横スクロールしたりなど。 実際に記事を書いていると、手...