
WordPressで記事を書いていると、「比較表を作りたい」「情報を表でまとめたい」と思うことはありませんか?
実は、WordPressではプラグインを使わなくても、標準のブロックエディタで簡単に表(テーブル)を作成できます。
この記事では、ブロックエディタのテーブルブロックだけを使って、表の作成から、行・列を追加・削除や枠線の入れ方、うまく表示されないときの対処法まで、初心者さん向けにわかりやすく解説します。
WordPressで表(テーブル)を作る方法
WordPressのブロックエディタには、最初から「テーブル(表)」を作成できる機能が用意されています。
HTMLやCSSの知識は不要で、画面操作だけで表を作れるのが特徴です。
下のような表を作ってみましょう!

テーブルブロックの追加方法
まずは、記事内にテーブルブロックを追加します。
テーブルを入れたい位置をクリックしカーソルを表示させ、画面左上の「+」ボタンをクリック

「テーブル」ブロックを選択

カラム数・行数を指定して「表を作成」をクリック

表が挿入されるので、文字を入力します。

これで、基本的な表は完成です。
ヘッダー・フッターを設定する方法
テーブルブロックでは、ヘッダー行・フッター行 を設定できます。
ヘッダー:項目名を固定できる
フッター:補足情報を入れられる
特にヘッダー行は、表を見やすくするためにおすすめです。
作成した表を選択します。選択すると、青い枠が表示されます。

公開の横の設定をクリックし、ブロックを選択
「ヘッダーセクション」をONにすれば、ヘッダーが設定できます。


文字を入力します。

1行余分な行が出来てしまいました。
次に、行を削除する方法を解説します。
また、フッターは、フッターセクションをONにすれば設定できます。
行・列を追加・削除する方法
表を作成したあとでも、行や列は自由に調整できます。
行を追加・削除
列を追加・削除
後から内容が増えても、簡単に修正できます。
まず、行の削除をしていきます。
削除したい行にカーソルをおいて、「表を編集マーク」をクリックします。
そして、「行を削除」をクリック

これで、行を削除できました。

次は、右側に列を挿入してみます。
まず、列を入れたい列の隣の列にカーソルをおいて、「表を編集マーク」をクリックします。
「列を右に挿入」をクリック

右側に列を挿入できました。

セルの幅を固定する・しない
テーブルブロックでは、セル幅の設定も可能です。
幅を自動調整する
幅を固定する
セル幅の固定せずに使うと自動調節してくれるので、私はこちらをよく使っています。
表を選択した状態で、「設定」をクリックし「ブロック」を選択。
「表のセル幅を固定」のチェックを外す。


これで、セル幅が自動調整されました。
スタイルを変更する方法(デフォルト・ストライプ)
テーブルブロックには、あらかじめ用意されたスタイルがあります。
デフォルト
ストライプ(行ごとに色が交互に表示)
右側のブロック設定から簡単に切り替えられ、情報量が多い表ではストライプを使うと見やすくなります。
表を選択した状態で、右上の設定から「ブロック」をクリックし、「スタイル」を選択。
「デフォルト」になっていましたが、試しに「ストライプ」を選択してみます。

ストライプにするとこうなります。2行しかないので、デフォルトの方が良さそうですね。

文字色を変更する方法
表全体の文字色を変更することができます。
表を選択した状態で、右上の設定から「ブロック」をクリックし、「スタイル」を選択します。
今回はテキストの赤を選んでみました。

テキストを赤にするとこんな感じになります。

背景色を変更する方法
表の背景色を変更することもできますが、Cocoonでは使用しているスキンによって行ごとに自動で背景色が設定されるため、表全体に同じ色を指定しても一部の行にしか反映されないことがあります。
手順としては、表を選択した状態で設定をクリックします。
「ブロック」 → 「スタイル」をクリック
「背景」をクリックし、色を選択します。

こんな感じになります。スキンの仕様なのか一部の行にしか適用されませんでした。

元に戻しました。

文字サイズを変更する方法
表全体の文字サイズを変更することができます。
読みやすさを意識して調整するのがポイントです。
手順としては、表を選択した状態で設定をクリックします。
「ブロック」 → 「スタイル」をクリック
フォントサイズの「S」を選択してみます。

すべてのセルで、1行に収まりました。情報量が多いときなどに良さそうです。
ただし、表は少し小さくなりました。

表に枠線を入れる方法
表には枠線を入れることもできます。
枠線をつけると、表全体がはっきりして見やすくなります。
手順としては、表を選択した状態で設定をクリックします。
「ブロック」 → 「スタイル」をクリック
「枠線」のところをクリックし、色を選択します。

このように枠線が入ります。

ここまでで表は完成です!
また、枠線の太さも変えることができます。1pxにしてみました。
枠線のところに、1pxと入力します。

このように少し細くなりました。

表がうまく表示されない時の対処法
表が崩れて見える場合は、次の点を確認してみてください。
列数が多すぎないか
1セル内の文字数が多すぎないか
多くの場合、少し調整するだけで改善します。
まとめ
WordPressのブロックエディタを使えば、プラグインなしでも簡単に表(テーブル)を作成できます。
テーブルブロックで基本操作は十分
初心者でも安心して使える機能
ぜひ、記事作成に表を取り入れてみてください。

