WordPressで表を簡単に作成・編集する方法【初心者向け】

WordPressを使ってサイトやブログを作成する際、表を追加したいと思ったことはありませんか？しかし、「表を綺麗に作ることができない」「表を作成する方法がよくわからない」などの理由で表作成を諦めてしまう方が多くいます。

そこで今回は、Wordpressの投稿内にに表を作成する方法や表の編集方法などについて説明していきたいと思います。

0.1 ビジュアルエディタを拡張して表を追加する

1 プラグインの設定方法
2 表を作成
3 表の行や列を追加・削除
4 表をレイアウトする
5 表の色をつける方法

ビジュアルエディタを拡張して表を追加する

WordPressでは、<table>タグを活用して表を作成することができますが、HTMLの知識があまりない場合、<table>タグを活用して凝った表を作るのは、非常に難しいです。その場合、便利なのが「ビジュアルエディタを拡張して表を追加する方法」です。

WordPressのビジュアルエディタを拡張できるプラグインを使うことでタグの知識がなくても表を作成することが可能です。今回は「TinyMCEAdvanced」というプラグインを使います。

TinyMCEAdvancedプラグインのメリット

・HTMLの知識がなくても作れる ・ビジュアルエディタで編集できる ・直感的に手早く表を作れる ・他の追加機能も利用できる

TinyMCEAdvancedプラグインのデメリット

・スマホやタブレットで見やすく表示させるには別途調整が必要になる ・表のアクセシビリティが低い　などが挙げられます。

プラグインの設定方法

「プラグイン」→「新規追加」

「TinyMCEAdvanced」を検索し、「今すぐインストール」をクリックインストールできたら「有効」にする

表を作成

プラグインを設定すると、エディタの「ビジュアルモード」にボタンが増えます。そのボタンが表を作成するボタンとなります。ここで「行数」「列数」を指定して、表を作成してみます。表に外枠が必要な場合は「枠線」に1以上の数値を入力してください。エディタ上に表が作成されるので、自由に内容を記述しましょう。

表の行や列を追加・削除

エディタから行や列の追加を簡単に行うことができます。

行を追加したい時：カーソルがある行の上に追加したい時は「行を上に挿入」、下に追加したい時は「行を下に挿入」をクリックします。

行を削除したい時：削除したい行にカーソルを当てて「行を削除」をクリックします。

列を追加したい時：カーソルがある列の右に追加したい時は「列を挿入」、左に追加したい時は「列を左に挿入」をクリックします。

列を削除：削除したい列にカーソルを当てて「列を削除」をクリックします。

表をレイアウトする

見出しとデータを区別して見やすくする

まずは項目名にしたいセルを選択します。複数選択したい場合はドラッグしたままカーソルを持っていきましょう。次にメニューより「テーブル→セル→セルのプロパティ」の順にクリックします。「セルのプロパティ」画面が表示されます。

続いてこの画面の設定方法を説明してきます。

幅：セルの横幅を調整したい時、ピクセル数を入力して調整できます。列の横幅を調整したい時によく使います。

高さ：セルの高さを調整したい時にピクセル数を入力して調整できます。

セルの種類：「ヘッダーセル」を選択すると表の見出しを作ることができます。設定後、文字は太字になります。

範囲：「セルの種類」に似た設定項目で見出しの設定ができます。ここでの設定は主に音声ブラウザなどで役立ちます。ほとんど使用することはありませんが、HTMLに関して理解を深めたい方は、見出しの対象範囲の指定を参考にすると良いです。

横配置：右寄せ、左寄せ、中央揃えの３パターンから選ぶことができます。

縦配置：上揃え、中央揃え、下揃えの3つから選べます。

以上が各項目の解説になります。ここでは見出しを作るため「セルの種類」から「ヘッダーセル」を選択して「OK」を押します。ブラウザで見出しとして分かりやすく表示されているか確認してください。

列の横幅を調整する

こちらも「セルのプロパティ」を使用すると簡単に設定ができます。まず調整したい列のセルをクリックします。ここでポイントなのが１行目のセルを調整するということです。１行目のセルを調整するだけで、列の幅を調整することができます。二行目以降のセルの幅を調整するとセルの管理が複雑になり、どこを編集したかわからなくなるので気をつけましょう。 メニューから「テーブル→セル→セルのプロパティ」の順にクリックします。

「セルのプロパティ」画面が表示されるので、「幅」に数値を入力します。設定が完了したら「OK」をクリックします。実際にブラウザの表示を確認しながら横幅を決めましょう。

データを右寄せ、左寄せ、中央揃えにする

まず、調整したいセルを選択します。セルのプロパティを開くと「横配置」があります。ここから調節します。

表の色をつける方法

表の枠に色のついた線を引く方法

まずは枠に色を付けたい表のすべての部分を選択します。ツールバーから「テーブル」をクリックします。「セル」から「セルのプロパティ」をクリックします。次に「高度な設定」タブをクリックし、「枠線の色」の右側の□をクリックします。

パレットが出てくるので、枠線の色にしたい色を選びます。

枠線の色の横に色のコードが入ったら「OK」をクリックします。これで枠に色がつきます。

表のセルの背景に色をつける方法

まずは、背景に色を付けたい表のすべての部分を選択します。ツールバーから「テーブル」をクリックします。次に「セル」から「セルのプロパティ」を選択し、「高度な設定」タブをクリックします。「背景色」の欄の右側の四角い□マークをクリックします。

パレットが出てくるので、枠線の色にしたい色を選びます。

そして背景色の横に色のコードが入ったら、「OK」をクリックします。

これで背景色が付きます。

表のアクセシビリティを強化する

TinyMCEAdvancedプラグインで作成された表は音声ブラウザ対応などのアクセシビリティの考慮が全くされていません。アクセシビリティとは、高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できることを意味します。

また、表のデータの構造を人間には理解できますが、コンピュータにとっては構造が不明確になっています。そのため、アクセシビリティを強化するためには表の構造化が必要です。

・表の構造化そもそも表の構造化とは、そのままではデータの羅列でしかないデータテーブルを「テーブルのヘッダー部分（見出しセルグループ）」と「テーブルのボディ部分」と「表のフッター部分（テーブル最後のカラム）」の3つに分けることで、表の構造を明確にすることを言います。ここで用いるのはtheadタグとtbodyタグとtfootタグがそれぞれ表の構造を示すために使われるタグです。

・キャプションを付与する表のアクセシビリティを強化するためには、表の構造化の他にキャプションが必要になります。表のキャプションとは表の題名を意味します。キャプションを表に付与するにはtable開始タグの直後にcaptionタグを挿入して表の題名を記述すれば完了です。