WordPressの表を完全解説！作成方法からカスタマイズまで

WordPressの管理画面から表を挿入したい箇所で、ブロックエディタの「＋」アイコンをクリックし「テーブル」を選択します。

作成したいテーブルの行（横）・列（縦）を指定し「テーブルを作成」をクリックします。

STEP2で空の表が作成されました。
セルをクリックすることでテキストを入力することができます。

また、ブロックエディタのアイコンをクリックすることで行・列の追加や削除も可能です。

表計算ソフトを開き、表の範囲を指定して右クリックから「コピー」を選択します。
（表は前もって作成しておいてください）

WordPress管理画面を開き、表を挿入したい箇所で右クリックして「貼り付け」を選択します。

以上で表の挿入は完了です。
貼り付け後の表はWordPress内で自由に編集できます。

表計算ソフトでのデザイン（セル・文字の色や大きさなど）を反映させることはできません。
表のデザインを変更したい場合は、貼り付け後にWordPress内で調整しましょう。

表計算ソフトで表を作成し、スクリーンショットをとります。

WordPressの開き、表を挿入したい箇所に画像を挿入します。

以上で表の挿入は完了です。
挿入後に表を編集することはできませんが、表計算ソフトで作成したデザインをそのまま使用することができます。

管理画面の「TablePress」から「新しいテーブルを追加」をクリックし、以下の編集画面から表を作成します。
表の作成が終わったら「変更を保存」をクリックし、ショートコードをコピーしておきます。

STEP2でコピーしたショートコードを任意のページに貼り付けて完了です。
これで機能付きの表が表示されます。

ブロックエディタの「＋」アイコンをクリックし「Flexible Table Block」を開きます。

カラム数・行数を入力して表を作成します。
テーブルにカーソルがある状態で画面右側タブの「ブロック」から表の編集が行えます。

上図は「ストライプ」を選んだ場合のテーブルになります。
WordPressテーマによって選べるスタイルの数が異なります。

カラムではなく横一行の配置を変更するにはCSSを使用してください。

以下、色変更後のテーブルになります。

基本的にテーブル全体の色が変更されます。
テーブルの一部だけ色を変えたい場合はプラグインまたCSSを使用してください。

ヘッダーラベルはデフォルトで中央寄せになっています。

画像を選択したら挿入は完了です。

インライン画像をクリックすると幅を調整でき、これによって画像サイズの変更が可能です。

ブロックエディタの「＋」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML内に以下のコードをコピペします。

<style>
 table {
  white-space: nowrap;
  overflow-x: scroll;
 }
</style>

記述したコードの意味は以下です。
「white-space: nowrap; 」は、セル内の文字列が折り返されない
「overflow-x: scroll;」は、はみ出した要素をスクロールさせる

以上でレスポンシブ対応は完了です。
画面サイズが小さくなっても表をスクロールして見られるようになります。

ブロックエディタの「＋」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML内に以下のコードを参考に記述します。

<style>
  table tr td:nth-child(1) {
    width: 50%;
  }
  table tr td:nth-child(2) {
    width: 20%;
  }
  table tr td:nth-child(3) {
    width: 30%;
  }
</style>

「width」は、テーブル全体に対して何％の横幅を使用するかを表します。

「tr td:nth-child()」は、左から何番目のセルに対して「width」を適用させるかを表します。
上記の例では「nth-child(3)」までしか記述していないので、左から3番目のセルの長さまでしか調整できません。
4列目、5列目と列が増える場合は「nth-child(4)」「nth-child(5)」の記述も必要になります。

以上で横幅の調整は完了です。
以下の画像は表の横幅を左から50%・20%・30%の比率に調整したものになります。

ブロックエディタの「＋」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML内に以下のコードを参考に記述します。

<style>
  table tr td:nth-child(1) {
    background: gold;
    color: red;
  }
</style>

「background」は背景、「color」はテキストの色を指定します。
（色はカラーコードを使用）

「tr td:nth-child()」は、左から何番目の行に対して「background」や「color」を適用させるかを表します。
上記の例では「nth-child(1)」なので1列目に対して色の変更が適用されます。

以上で特定の列の色の調整は完了です。
STEP2のコードを反映させた表は以下になります。

ブロックエディタの「＋」アイコンをクリックし「カスタムHTML」を開きます。

カスタムHTML内に以下のコードを参考に記述します。（今回は）

<style>
  table tr:nth-child(1) {
    background: gold;
    color: red;
  }
</style>

「background」は背景、「color」はテキストの色を指定します。
（色はカラーコードを使用）

「tr:nth-child()」は、上から何番目の行に対して「background」や「color」を適用させるかを表します。
上記の例では「nth-child(1)」なので1行目に対して色の変更が適用されます。

以上で特定の行の色の調整は完了です。
STEP2のコードを反映させた表は以下になります。