みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressで表を挿入する方法をお伝えいたします。
![テーブルブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_table.png)
データや比較などの表を記事に入れたいときは、「テーブル」ブロックを使いましょう。このブロックでは、簡単な表を作成できます。
エクセルやGoogleスプレッドシートで作成した表を入れたい場合は、コピーペーストすれば挿入できます。ただし、セルに適用していた色や文字装飾は、すべて消えてしまいます。ご注意ください。
![表をGoogleスプレッドシートからWordPressにコピーペースト(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/6ywI2gx7NU-min.gif)
テーブルブロックを挿入する
「テーブル」ブロックを選択します。
![プラスボタンから「テーブル」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-add-1.png)
![左上のプラスボタンからメニューを開いて「テーブル」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-add-2.png)
![テーブルブロックの挿入画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-insert.png)
カラム数は、列数のことです。
![テーブルのカラムと行](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-column-line.png)
![テーブルブロック挿入完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-block.png)
![テーブルの操作方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/ndl8ayUrCD-min.gif)
スタイルを変更する
表のデザインは、右メニューバーから2種類より選べます。
![テーブルスタイル](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-style.png)
枠線のみのスタイル
枠線を消して奇数行の背景色を変える
![テーブルスタイルの切り替え(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/AQZ3vWXIi2-min.gif)
配置変更
ブロックメニューから、表全体の配置を左寄せ、中央揃え、右寄せにできます。
![配置を変更メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-align-select.png)
もう一度選択すると解除され、横幅いっぱいに配置されます。
![表の配置変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/FQ466jxQJF-min.gif)
列内の文字位置も、ブロックツールから変更できます。デフォルトだと左寄せですが、中央や右寄せにもできます。
![テキストの配置を変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-column-text-align.png)
![カラムのテキストの配置を変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Qzjt0HJg2D-min.gif)
ただし、エクセルのように個別セルでの文字配置変更はできません。あくまで列ごとのみです。
表の設定
右メニューバーから、以下の3つを設定できます。
![表の設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-setting.png)
- 表のセル幅を固定
- ヘッダーセクション
- フッターセクション
「表のセル幅を固定」は、各列の幅を統一してくれます。
セルによって文字数が違う表で、幅がアンバランスになる場合にオススメです。
![「表のセル幅を固定」チェックOFF](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-setting-nocheck.png)
![「表のセル幅を固定」チェックON](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-cell-width.png)
「ヘッダーセクション」と「フッターセクション」は、項目名を記述するための行を新しく追加します。
「ヘッダーセクション」は表の一番上に、「フッターセクション」は一番下に追加されます。
![「ヘッダーセクション」チェックON](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-header-section.png)
![「フッターセクション」チェックON](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-footer-section.png)
行数が長い表なら、「フッターセクション」に「ヘッダーセクション」の項目名と同じ文言を入れるのをオススメします。これなら、一番上の行がスクロールで隠れても、それぞれの列が何なのかが分かります。
![長い表のヘッダーとフッターのセクションに同じ項目名を入れた例(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/2FnxwNeg1L-min.gif)
色設定
![テーブルの色設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-right-menu-color.png)
右メニューバーから、表全体の文字や背景の色を変更できます。
文字色を変更すると、枠線も同じ色になります。
![テキスト色を変更したテーブル](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-text-color.png)
背景色は、「デフォルト」スタイルだと表全体が変わります。
![背景色を変更したデフォルトスタイルのテーブル](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-standard-bg-color.png)
「ストライプ」スタイルの場合は、ヘッダーとフッター、偶数行の背景色が変わります。
![背景色を変更したストライプスタイルのテーブル](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-stripe-bg-color.png)
他にもセルや列、行ごとに背景色を変えたいところですが、2021年8月現在のGutenbergではできません。これが、エクセルから表をコピペしたときに、色が消える理由です。
そのため、このような色つきテーブルは作れません。
![カラフルなテーブルの例](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-example.png)
行と列の追加・削除
ブロックツールバーにある、表のようなアイコンからは、行や列の追加、削除ができます。
![表の編集メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-edit.png)
ですが、エクセルのように行や列、セルの結合はできません。
![結合セルのある表](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-example-union.png)
このような結合セルがある表を、エクセルからコピーペーストすると崩壊します。
![結合セルのある表をGoogleスプレッドシートからWordPressにコピーペースト(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/3ckWqQM5jF-min.gif)
結合しない表に整えてから、コピーペーストしましょう。
表のキャプション
表の下にある小さなテキストエリアには、説明が入れられます。
![表のキャプションエリア](https://kotatsu.info/blog/wp-content/uploads/2021/08/table-caption.png)
必須ではありませんが、画像ブロックと同じく、この表が何なのか分かるように記述しておきましょう。
![表のキャプション文字装飾(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/nWZkhyIIZh-min.gif)
文字装飾も使えます。詳しくは下記ページをご覧ください。
画像を挿入する
セル内に画像を入れたい場合は、「インライン画像」を使用しましょう。
![テーブルにインライン画像を挿入(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/FsvGZvDQOA-min.gif)
「インライン画像」の挿入方法については、こちらの「インライン画像を挿入」の項目をご覧ください。
以上、表の挿入や編集方法を解説しました。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。