WordPressサイトに、HTMLを使わずに簡単に表を作成する方法をお探しの方向け。
WordPressで投稿・固定ページに投稿する際、記事の中に比較表や料金表等といった表（テーブル）を挿入したいという事があると思います。
WordPressサイトに表を挿入する方法はいくつかありますが、この記事では、HTMLを使わなくても簡単に表を作成する方法を3つ紹介します。
好きなところから読めます
WordPressサイトにHTMLを使わずに表を設置する方法は3つ
WordPressサイトにHTMLを使わずに表を設置する方法は3つあります。
- ビジュアルエディタ拡張プラグインAdvanced Editor Toolsの表作成機能を使う
- テーブル作成プラグインTablePressで表を作る
- Wordファイル・Googleドキュメントで作成した表をエディタに直接貼り付ける
上記の順に表の作成方法を紹介していきます。
ビジュアルエディタ拡張プラグインAdvanced Editor Toolsの表作成機能を使う
WordPressのビジュアルエディタには表（テーブル）作成機能がありません。
しかし、ビジュアルエディタ拡張プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」をインストールすると、表の作成機能を追加できます。
手順は次のとおりです。
- 手順①：Advanced Editor Toolsのインストール
- 手順②：表作成機能をエディターに追加
- 手順③：拡張されたビジュアルエディターで表作成する方法（投稿・固定ページ共通）
- 手順④：表の項目を左・右・中央揃えにする
- 手順⑤：枠線・セルの背景の編集
上記のとおりです。
手順①：Advanced Editor Toolsのインストール
ダッシュボード＞プラグイン＞新規追加 を選択します。
プラグイン検索窓に「Advanced Editor Tools」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。
メニューの「設定」項目をクリックすると、「TinyMCE Advanced」という名称でプラグインが追加されたことが確認できます。
手順②：表作成機能をエディターに追加
表作成機能をビジュアルエディタのツールバーに追加し、表を作成できるように設定します。
ダッシュボード＞設定＞TinyMCE Advanced を選択します。
エディター設定画面が表示されますので、使用しないボタンの中にある「テーブル」を上部のツールバーにドラッグします。
ツールバーにドラッグしたら、「変更を保存」します。
これでエディターに表作成機能を追加できました。
手順③：拡張されたビジュアルエディターで表作成する方法（投稿・固定ページ共通）
それでは、TinyMCE Advancedによって機能が追加されたビジュアルエディターを使って、表を作成してみましょう。
記事作成画面のツールバーに追加したテーブルのボタンをクリックすると、テーブル作成メニューが表示されます。
テーブル作成メニューの「テーブル」にマウスオーバーすると、任意の列・行を選択できます。
試しに、「4列（縦）× 3行（横）」の日程表を作ってみたいと思います。
「テーブル」から4×3の場所をマウスオーバーして、クリックします。
記事の中に表が挿入されました。
各セルの中に必要事項を入力して表（テーブル）を作っていきます。
このように、簡単に作成できます。
ただ、このままだと素っ気ないので、見やすくするために細かい部分を修正したいと思います。
手順④：表の項目を左・右・中央揃えにする
一番上の行の項目を中央揃えにしたいと思います。
一番上の行の項目をドラッグし、「テーブル」メニューを開きます。メニューの行を選択し、「行のプロパティ」をクリックします。
「配置」の項目から①「中央」を選択し、②「OK」をクリックします。
一番上の行が全て中央に揃える事ができました。
右に寄せたい場合は「配置」の項目から「右」を選択すれば、右に寄せる事ができます。
手順⑤：枠線・セルの背景の編集
表（テーブル）の枠線の太・色、セルのパディングなどの編集を行います。
表全体をドラッグし、「テーブル」メニューを開き、「表のプロパティ」をクリックします。
表のプロパティが表示されますので、ここで細かい部分を設定します。
「一般」タブ
「一般」のタブではテーブルの幅、枠線の太さ、セルのパディングやスペース等を設定できます。
「詳細」タブ
「詳細」のタブでは枠線の色や背景色、Border style（線のデザイン）を設定できます。試しに、カラーを追加してみます。
変更後、「OK」をクリックします。
下記のように枠線の太さや枠線の色、背景色を変更する事ができました。
テーブル作成プラグインTablePressで表を作る
2つ目の方法は、テーブル作成専用の「TablePress」というプラグイン、を使って、表を作る方法です。
プラグインを使うと、以下のような表を簡単に作成できます。
| 入荷日 | 商品 | 品番 | 価格 | 数量 |
|---|---|---|---|---|
| 11/01 | バナナ | fr001 | 200円 | 170 |
| 11/01 | りんご | fr004 | 120円 | 156 |
| 11/05 | すいか | fr021 | 1,400円 | 30 |
| 12/15 | みかん | fr901 | 450円 | 55 |
「TablePress」の使い方は、以下の記事で詳しく解説していますので、ぜひ参考にして下さい。
Wordファイル・Googleドキュメントで作成した表をエディタに直接貼り付ける
3つ目の方法は、WordファイルやGoogleドキュメントで作成した表をエディタに直接貼り付ける方法です。
試しに、Wordファイルで作成した下図の表を、WordPressサイトに挿入してみましょう。
まずは表全体を選択してコピーします。
コピーした表を、WordPressのエディター（記事編集画面）に貼り付けます。
たったこれだけで表を作成できます。
WordファイルやGoogleドキュメントを貼り付ける時の注意点
ご覧のとおり、コピペで貼り付けた表は装飾されない状態で挿入されますので、WordファイルやGoogleドキュメントで指定した枠の太さや背景色は反映されません。
したがって、表の見栄えを変更したい方は、「手順⑤：枠線・セルの背景の編集」という項目で解説しているとおり、ビジュアルエディターのテーブル機能を使って装飾して下さい。
まとめ
以上、HTMLを使わずに記事の中に表（テーブル）を挿入する方法を3つ紹介しました。
HTMLは分からないけど、手軽に表を作成したいという方は、是非、参考にして下さい。
