ワードプレステーブルブロックで表を作成する方法（おすすめCSSあり）

2021年12月15日

ワードプレスのブロックエディター（Gutenberg）のテーブルブロックを使って表を作成する方法を解説します。

この記事でわかること

・テーブルブロックで表を作成する
・列、行の挿入・削除
・文字の配置の変更
・作成したテーブルのスタイルの変更方法
・おすすめスタイルのCSS
・スマホ表示における設定と注意点

※できればパソコンまたはスマホなら横長でご覧ください。
途中作成途上の表がありますが、横長で見て頂くとわかりやすいためです。

ワードプレスのデフォルトのテーブルブロック以外にもよりフレキシブルな表を作成できるおすすめプラグインがあります。こちらの記事も合わせてご覧ください。

WordPressブロックでセルの結合・配色ができる表作成プラグインFlexible Table Block

ワードプレスのブロックエディターでシンプルな表を作成するならワードプレス標準のテーブルブロックで ...

https://web-children.com/2021/12/15/flexible-table-block/

1. テーブルブロックで表を作成する
2. スマホ表示設定と注意点
- 2.1. スマホ表示では表は横にはみ出す
- 2.2. はみ出さない設定もできる
3. まとめ

テーブルブロックで表を作成する

基本となる手順と作成する表

テーブルブロックを挿入する
必要ならばヘッダーラベルをONにする
文字を入力する
必要に応じて列や行を挿入・削除する
文字の配置を整える
表のスタイルを整える

今回は次のような表を作成します。

	A社	B社
サイズ（mm）	230×100×100	220×110×120
色のバリエーション	2色（白、黒）	3色（白、黒、青）
価格	2300円	2500円

Gutenbergエディターを開けたところから始めます。

テーブルブロックを挿入する

１．テーブルブロックをクリックして挿入

①画面左上の+マークをクリック
②”テーブル”ブロックを選択

２．カラム数（列数）と行数を指定して表を作成する

①カラム数、行数を入力
②”表を作成”をクリック

今回は３×３の表にしてみました。

挿入後の表です。

表の一行目にヘッダーラベルをつける

ヘッダーセクションをONにすることで、一行目に表のヘッダーラベルをつけることができます。

次のように画面右のパネル内の”表の設定”で操作します。

ヘッダーラベルが表の一行目となります。

似たような設定にフッターセクションのONがあります。行の一番下にラベルがつきます。
（”合計”とか”平均”　なんかを記入するのには使えますね）

表に文字を入力する

表の各セルに文字を入力していきます。文字数に応じて自動的に列の幅が変わります。

セル内で文字を改行したければ、SHIFT+[Enter]で可能です。

色のバリエーションのセルを2行に改行して実際にweb表示すると次の通りです。

	A社	B社
サイズ（mm）	230×100×100	220×110×120
色のバリエーション	2色（白、黒）	3色（白、黒、青）
価格	2300円	2500円

列・行の挿入・削除と文字の配置

・列や行の挿入・削除
・入力した文字の配置変更

は次のようにブロック内ツールバーで可能です。

作成中の表を”カラムを中央寄せ”にしてweb表示させると次の通りです。

	A社	B社
サイズ（mm）	230×100×100	220×110×120
色のバリエーション	2色（白、黒）	3色（白、黒、青）
価格	2300円	2500円

表のスタイルを整える

テーブルブロックの”スタイル”を使って整える

画面右のパネル内の”スタイル”で”デフォルト”以外に”ストライプ”を選べるようになっています。

実はここまでで作成した表は”デフォルト”設定です。
”ストライプ”に変更してweb表示すると次のようになります。

	A社	B社
サイズ（mm）	230×100×100	220×110×120
色のバリエーション	2色（白、黒）	3色（白、黒、青）
価格	2300円	2500円

”デフォルト”ではセルに枠線がありましたが、”ストライプ”では枠線が消えて、行がストライプ状に塗られます。

ちなみに、色設定で色を変更できます。

ピンクに設定すると次のとおりです。

	A社	B社
サイズ（mm）	230×100×100	220×110×120
色のバリエーション	2色（白、黒）	3色（白、黒、青）
価格	2300円	2500円

ストライプ状の塗色を変更できるわけではなく、ベースカラーの変更となります。少し微妙ですね。

表のスタイルはテーマによって若干異なる

実は、このスタイルは使用するテーマによって出来上がったデザインが若干異なります。

ちなみにここまでで表示した表は、このウェブチルサイトで使用しているテーマ”Luxeritas”での見映えです。

そこで、別に３つのテーマで表の見映え比較をしてみました。
取り上げたテーマは、”Twenty Seventeen”、”Twenty Nineteen”、”Lightning”です。
（文字を入力したまま、配置を整えるなどはしていない状態です）

”デフォルト”のスタイルでの比較

Twenty Seventeenには表の外枠および縦の枠線がありません。
Twenty NinteenとLightningには各セルの枠線があるものの、線の太さなどスタイルが大きく異なります。

”ストライプ”スタイルでの比較

Twenty Nineteenには各セルの枠線が残っていますが、残りの２つは外枠および縦の枠線がありません。

このように、テーマによって若干の差とはいえ、ずいぶん見やすさが異なると思います。

企業サイトなどでデザイン重視の表ならば違うかもしれませんが、ブログなど情報を発信するからには、ユーザーが情報を読みやすい表であるべきと思います。

そういう意味で、Twenty Nineteenのように明確な枠線はあるべきでしょう。

カスタムCSSによるおすすめスタイルの提案

読み取りやすい表として次の条件とします。

読みやすいようにストライプ状の背景塗りは入れる
枠線はあること
ラベルとなる行や列の枠線は太めまたは濃い色に変える

この条件でできるだけテーマによる差が生じにくいよう、次のカスタムCSSを提案します。

/* 表の外枠線 */
.custom-table table {
    border: 2px solid #333;
    border-collapse: collapse;
}
/* ヘッダーラベル下のデフォルト線を削除 */
.custom-table thead {
    border: none;
}
/* 表の各セルの枠線 */
.custom-table thead th,
.custom-table tbody td {
    border: 1px solid #aaa;
}
/* １列目右側の枠線 */
.custom-table thead th:first-child,
.custom-table tbody td:first-child {
    border-right: solid 2px #333;
}
/* ヘッダーラベル下の枠線 */
.custom-table thead th {
    border-bottom: solid 2px #333;
}

/* 偶数行に着色、奇数行は白 */
.custom-table tr:nth-child(odd) {
    background: #f8f5f2;
}
.custom-table tr:nth-child(even) {
    background: #fff;
}