テーブル（表）カスタマイズ

Gutenberg はデフォルトで追加できるブロックにテーブルがあります。しかしそのデザインは選んだテーマによって変わります。テーマによっては表が見にくかったり、サイトのデザインに合わないことも少なくありません。

この章では、追加CSS を使った表のカスタマイズを実践します。もちろんワードプレス標準のブロックエディターのみを使用します。

基本のテーブル

参考１は Gutenberg の設定のみで作成したテーブルです。これは、テーブルのスタイルを「ストライプ」枠線を「1px」で設定しています。ストライプの背景も枠線の色も変更可能ですし、ストライプを外せば縞模様のない表となります。

ヘッダー付きテーブル

参考２も Gutenberg の設定変更のみで作成。こちらは参考１の表と同じ設定で、ヘッダーセクションをオンにしただけのスタイルです。

この表のコードです。ヘッダーラベル部分は「th」セルの要素は「td」となっています。

<figure class="wp-block-table is-style-stripes"><table class="has-border-color has-ast-global-color-0-border-color has-fixed-layout" style="border-width:1px"><thead><tr><th>ヘッダーラベル</th><th>ヘッダーラベル</th></tr></thead><tbody><tr><td>セルの要素</td><td>セルの要素</td></tr><tr><td>セルの要素</td><td>セルの要素</td></tr></tbody></table><figcaption class="wp-element-caption">参考２</figcaption></figure>

実際に作りたい表

参考２の表にはヘッダーがありますが、実際に日本のコーポレートサイトによく見かける「会社概要」は次のような表になっていると思います。この場合はヘッダーは上部ではなく左カラムとなります。

こちらの表（参考３）も Gutenberg のみで作成。こちらはストライプのないデフォルト設定です。実際に作りたい表はこの表の左側部分にのみ背景色を付けたデザインです。

この表のコードを見てみましょう。参考１の表と同じで全ての項目がセルの要素となっています。

<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>会社名</td><td>株式会社リアルコミュニケーションズ</td></tr><tr><td>従業員数</td><td>123名</td></tr><tr><td>事業内容</td><td>通信機器販売・設置・施工　サイト制作</td></tr></tbody></table><figcaption class="wp-element-caption">参考３</figcaption></figure>

わかりやすく書くと下のコードになります。

<tbody>
<tr>
<td>会社名</td>
<td>株式会社リアルコミュニケーションズ</td>
</tr>
<tr>
<td>従業員数</td>
<td>123名</td>
</tr>
<tr>
<td>事業内容</td>
<td>通信機器販売・設置・施工　サイト制作</td>
</tr>
</tbody>

見出しとしたい「会社名」や「従業員数」が「td」で囲まれています。これらを「td」から「th」に変更することが、CSS を適用する前準備となります。

テーブル html（参考）

<tr>・・・行
<td> ・・・表の中身（要素）
<th>・・・表の見出し（ヘッダー）

CSS テーブルカスタマイズ

手順はこのようになります。

1. テーブルブロックを追加
2. 会社概要などを表に記入
3. ブロックオプションから HTMLとして編集
4. HTML 見出しとなる部分を「th」に変更
5. 外観 → カスタマイズに追加CSS を記載
6. テーブルブロックの高度な設定に追加 CSS クラスを記入

先ほどの表（参考３）の HTML を編集した表がこちらです。上の手順４まで進んだ状態です。

カスタマイズに CSS を記載

手順５になります。追加CSS のクラスは「tabel1」としてあります。このCSS の線や背景色を変更すれば様々なサイトデザインに適用すると思います。テーマによっては背景色が変えられないので、その場合は !important を挿入してください。

例　background: #4ecdc4!important;

/* テーブルスタイル */
.table1 table th{
	color: #ffffff;
	border: 1px solid #fff;
	text-align: center;
	vertical-align: middle;
	background: #4ecdc4;
}

.table1 table td{
	border: 1px solid #fff;
	background: #f5f5f5;
}

高度な設定に CSS クラスを追加

作成したテーブルブロックの高度な設定にクラス「table1」と記載すればデザインが適用されます。

適用した CSS は、文字の大きさやパディングをテーマに委ねてあります。表を使う場所によって背景色などのデザインを変えたい場合はクラスを変えて登録します。