WordPress の記事に表を挿入するにはHTMLの知識が必要だ。しかし、プラグインを利用すると初心者の方でも簡単に表を挿入することができる。また表を使い情報を整理とコンテンツが読みやすくなり、ユーザーの離脱を防ぐことにつながる。そこでwordpressの投稿に表を挿入する下記4つの方法を解説する。
・挿入
・編集
・調整
・リセット
表の作成の前にプラグイン「TinyMCE Advanced」を必ずダウンロードしよう。
WordPressの投稿機能（ビジュアルエディタ）は、デフォルトの状態だと表の挿入、または編集ができないからだ。
このプラグインはwordpress初心者から上級者の大半が使っている。豊富な編集機能をもち、さらにメニュー画面がドラッグ&ドロップで設定でき、日本語対応しているため使いやすい。必須と言ってもいいプラグインなのでこの機会に導入しよう。
表を作成する前に「 TinyMCE Advanced の設定」は必須なので完了しておこう。
注２：表のデザインについて
表の文字・罫線・背景の色味などはテンプレートのデザインに依存する。ここでは例としてテーマ” Twenty Twelve “を使って解説する。
１．表を挿入する方法
表のアイコンをクリックし、「テーブルを挿入」にカーソルをあてよう。“ テーブル ”という表記は、HTML ソースで表を作る時にテーブルタグを使うことから来ている。
下図赤枠のようなパネルが表示されたら、表の行と列の数値を決めてクリックしよう。
※ パネルは「列数（最大数10）× 行数（最大数10）」の範囲で選択ができる。またパネルの下部に「列数×行数」の数値が表示されるので、この数値を確認しながら表を挿入しよう。
すると図のようにエディタに表が挿入される。
表について簡単に解説する。基本的なことだが表の編集・調整がしやすくなるので確認がてら目を通そう。
「セル」とは、表にある１つ１つのマスのことを指す。そして「列」は縦に並ぶセルを指し、「行」は横に並ぶセルをのことを指す。このセルの中にテキストや数値を入力して表を作成する。また、セルのプロパティを使うと表の見出しを設定したり、列幅を調整することもできる。
２．表を編集する方法
表のツールには多くの操作方法があるので、混乱しないためにもここの解説を基本としてしっかり抑えておこう。
２−１．行・列を追加する方法
ここでは行の追加方法を解説する。この解説を参考に列の追加も同様にできるようになる。
まず、追加するために基準となる行を決めて、そのセルをクリックする。
次に「表」アイコンをクリックして行を挿入しよう。ここでは例として「行を上に挿入」をクリックする。
すると下図のように行が追加される。
２−２．行・列を削除する方法
ここでは列を削除する方法について紹介する。この解説を参考に行の削除も同様にできるようになる。
まず、表の中の削除したい列のセルをクリックしよう。
「表」アイコンをクリックして「列の削除」をクリックしよう。
これで列が削除される。
３．表を調整する方法
単にテキストや数値を羅列した表は読む気を失わせる可能性があるが、見やすく整えられた表なら読み進めてくれるだろう。ここでは見やすい表にするための調整方法を解説する。
３−１．見出しとデータを区別して見やすくする方法
次の図のように項目名にしたいセルを選択しよう。
※ 項目名の「番号」をドラッグして（クリックしたまま）、「おいしさ度数」までカーソルを持っていくと図のように選択できる。
次にメニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。
すると「セルのプロパティ」画面が表示される。
この画面の設定方法を覚えておけば、表を調整する際に便利なので一つひとつ解説しておく。
| 項目名 | 内容 |
| 幅 | セルの横幅を調整したい時、ピクセル数を入力して調整できる。列の横幅を調整したい時によく使う。 |
| 高さ | セルの高さを調整したい時、ピクセル数を入力して調整できる。 |
| セルの種類 | 「ヘッダーセル」を選択すると表の見出しを作ることができる。設定後、文字は太字になる。 |
| 範囲 | 「セルの種類」に似た設定項目で見出しの設定ができる。ここでの設定は主に音声ブラウザなどで役立つ。ほとんど使用することはないが、HTML に関して理解を深めたい方は、見出しの対象範囲の指定を参考にすると良いだろう。 |
| 横配置 | 左 /中央 /右 の3パターンからセル内の配置を選ぶことができる。 |
| 縦配置 | 上 /Middle /下 の3パターンからセル内の配置を選ぶことができる。 |
以上が各項目の解説である。
ここでは、見出しを作るため「セルの種類」から「ヘッダーセル」を選択して「OK」をクリックしよう。
ブラウザで確認すると下図の赤枠の通り見出しとして分かりやすくなる。
３−２．列の横幅を調整する
これも先の「３−１．見出しとデータを区別して見やすくする方法」で解説した「セルのプロパティ」を使用すると簡単に設定できる。
まず調整したい列のセルをクリックする。
※ ポイントは１行目のセルを調整すること
１行目のセルを調整するだけで列の幅を調整することができる。２行目以降のセルの幅を調整するとセルの管理が複雑になり、どこを編集したかわからなくなるので気をつけよう。
メニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。
図の「セルのプロパティ」画面が表示されるので、「幅」に数値を入力しよう。
設定が完了したら「OK」をクリックしよう。
※ ピクセル数を計測する方法
コンテンツ内のピクセル数を計測したい場合、ブラウザの拡張機能を使うと簡単に計測できる。Google Chrome なら「Page Ruler」、Firefox であれば「MeasureIt」が使いやすい。もちろんどれも無料のツールだ。
実際にブラウザの表示を確認して横幅を決めよう。ここではいくつかのピクセル数で変更してプレビューで確認し、130px がちょうど見映えの良い横幅となった。
３−３．データを右寄せ・左寄せ・中央揃えにする
ここでは例として全てのデータを右寄せにする方法を解説する。まず、調整したいセルを選択しよう。
続いて「右寄せ」アイコンをクリックしよう。
中央寄せにしたい場合は「中央揃え」アイコンをクリックしよう。ここで、セルのプロパティを開くと「横配置」があり、同様の機能をする。しかし、ソース上は同じ内容なので、使いやすい方を選ぶとよい。
これがブラウザでの表示イメージだ。
４．表をリセットする方法
表中のデータを調整していると、下図のように編集内容がごちゃごちゃになってしまい、まとめてリセットしたいこともあるだろう。
その時に「フォーマットをクリア」という便利なツールを使うと簡単にリセットができる。
※ ただし、ここの解説方法ではセルのプロパティで設定したセルの種類と範囲はクリアされないため、セルのプロパティでクリアにするしかない。
まず表をどこでも良いのでクリックすると、編集画面の下部に「table」タグが表示されるのでクリックしよう。
すると表のセルが全て選択される。
次に「フォーマットをクリア」アイコンをクリックしよう。
これで表の編集内容がリセットされる。
5．まとめ
いかがだっただろうか。表を使うことでコンテンツが読みやすくなり、ユーザーがページから離脱するのを防ぐことにつながる。ぜひ実践してほしい。
こんにちは。いつも参考にさせていただいております。
一点質問させてください。
テーブルを作成し、表を表示させたいのですが枠線が表示されません。
ビジュアルエディタ上では枠線が表示されますが、ブラウザの表示では
枠線が消えてしまいます。
TinyMCE Advancedの設定も済んでいます。
HTMLにborder=”1″などの属性も入れてみましたが改善しません。
以上です。
用件のみで失礼いたします。
ご質問ありがとうございます。
テーマは何をお使いでしょうか？
基本的に表のスタイルは、WordPressテーマのデザインに依存します。
（例のテーマ” Twenty Twelve “では縦線が非表示というデザインです）
ご回答ありがとうございます。
テーマは購入した教材のオリジナルテーマです。
テーマによっては枠線が非表示と言うことがあるんですね。
と言うことは、テーマのデザインを調べるべきということになりますね。
その場合はＣＳＳを、と言うことになるのでしょうか。
早速やってみます。
ありがとうございました。